2

すみません、これはばかげた質問かもしれません。

Meteor でブートストラップ 3 と twitter ブートストラップ ウィザードを混在させようとしています。

<template name="bootstrapWizard">
    <div id="rootwizard" class="tabbable tabs-left col-sm-6">
        <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="email">Email:</label>
                        <div class="col-sm-4">
                            <input type="email" class="form-control" id="email" placeholder="Enter email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="pwd">Password:</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                        </div>
                    </div>                  
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane" id="tab2">
                2
            </div>
            <div class="tab-pane" id="tab3">
                3
            </div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a></li>
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                <li class="next"><a href="#">Next</a></li>
            </ul>
        </div>
    </div>
</template>

列 (またはグリッド (?)) がうまく機能しません。私がclass="form-horizontal"取り出すと、列は近づきますが、そうあるべきではありません。

私はこの CSS とブートストラップに本当に慣れていませんが、stackoverflow を数分間さまよいましたが、同様のケースを見つけることができませんでした。

使用すべきブートストラップ CSS クラスがあるかどうか疑問に思っています...

※参考：bootstrapウィザードとtwbs:bootstrap 3.3.5

編集：現在のルックス：ここに画像の説明を入力

期待される：ここに画像の説明を入力

4

1 に答える 1

4

左揃えのタブは Bootstrap 3 には存在しないため、代わりにスタック ピルを使用する必要があります。次に、積み上げられた Bootstrap ピルを少し調整して、必要なタブのように見せる必要があります。

$(document).ready(function() {
  	$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills nav-stacked'});
});
/* Just for this snippet to push down the content - can be removed */
#rootwizard {
    margin-top: 10px;
}
/* Consistent styling of the label on horizontal form */
.control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
}

/* Tweaking Bootstrap pills to look more like tabs when on the left */
.nav-stacked.nav-pills>li.active>a, .nav-stacked.nav-pills>li.active>a:focus, .nav-stacked.nav-pills>li.active>a:hover {
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-right-color: transparent;
}
.nav-stacked.nav-pills>li>a {
    border-radius: 4px 0 0 4px;
}
.nav-stacked.nav-pills>li>a {
    margin-right: -1px;
}
.nav-stacked.nav-pills {
    border-right: 1px solid #ddd;
    padding-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
<div class="container">
   <div id="rootwizard" class="tabbable tabs-left col-xs-12">
        <ul class="nav nav-pills nav-stacked col-xs-2">
            <li><a href="#tab1" data-toggle="pill">First</a></li>
            <li><a href="#tab2" data-toggle="pill">Second</a></li>
            <li><a href="#tab3" data-toggle="pill">Third</a></li>
        </ul>
        <div class="tab-content col-xs-10">
            <div class="tab-pane" id="tab1">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="control-label col-xs-2" for="email">Email:</label>
                        <div class="col-xs-offset-1 col-xs-8">
                            <input type="email" class="form-control" id="email" placeholder="Enter email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-2" for="pwd">Password:</label>
                        <div class="col-xs-offset-1 col-xs-8">
                            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                        </div>
                    </div>                  
                    <div class="form-group">
                        <div class="col-xs-offset-3 col-xs-8">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane" id="tab2">
                2
            </div>
            <div class="tab-pane" id="tab3">
                3
            </div>
            <div class="col-xs-11">
                <ul class="pager wizard">
                    <li class="previous first" style="display:none;"><a href="#">First</a></li>
                    <li class="previous"><a href="#">Previous</a></li>
                    <li class="next last" style="display:none;"><a href="#">Last</a></li>
                    <li class="next"><a href="#">Next</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

于 2015-09-11T09:42:52.350 に答える