嘿我正在使用bootstrap 3制作网页,而且我遇到了一个问题。当我有一个容器,然后在它里面的一些文本旁边的按钮,文本字段或下拉菜单时,文本永远不会像按钮,文本字段等那样垂直大,所以永远不会结束垂直居中的元素。
我做了一个小小的例子,你可以很快看到我在说什么。 http://jsfiddle.net/8h3WB/1/
似乎有引导程序,或者通常css应该有办法解决这个问题。提前感谢您提供的任何帮助。
小提琴中的代码如下:
HTML
<div class="col-xs-12">
<p class="pull-left">press button</p>
<button type="button" class="btn btn-lp pull-left">Save</button>
<br class="clear-fix" />
</div>
CSS
.col-xs-12 {
border:1px solid red;
}
答案 0 :(得分:0)
<form class="form-inline" role="form">
<div class="form-group">
<lable>press button</lable>
<button type="button" class="btn btn-default">Save</button>
</div>
</form>
OR
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<lable>press button</lable>
<button type="button" class="btn btn-default">Save</button>
</div>
</form>
</div>
Bootstrap 3.x和表单有几种方法。如果它不是表单,您将使用内联标记(如跨度)或者您要修改要显示的p标记:inline;
<div class="container">
<span>press button</span>
<button type="button" class="btn btn-default">Save</button>
</div>
OR
<div class="container">
<p class="display-inline">press button</p>
<button type="button" class="btn btn-default">Save</button>
</div>
CSS
.display-inline {display:inline}
如果您想要文本旁边的下拉列表:
.display-inline {display:inline}
.display-inline-block {display:inline-block}
HTML:
<p class="display-inline">Pick a something:</p> <div class="dropdown display-inline-block">
<a href="#" class="btn btn-default btn-plus dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a></li>
<li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a></li>
<li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a></li>
<li class="nav-divider"></li>
<li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a></li>
<li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a></li>
</ul>
</div>