请原谅,这可能是个愚蠢的问题。
我正在尝试将 Bootstrap 3 与 Meteor 中的 Twitter Bootstrap 向导混合使用:
<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 和 bootstrap 东西真的很陌生,但我在 stackoverflow 上徘徊了几分钟,但找不到类似的案例。
想知道是否有我应该使用的引导 CSS 类...
最佳答案
由于 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>
关于css - Bootstrap 3 表单水平无法与 bootstrapWizard 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32517935/