我正在使用 Twitter Bootstrap 3。我需要用一个搜索栏和两个按钮填充一个“行”。我的问题是该行没有延伸到页面的整个宽度。
这是它的样子:
<div class="container-fluid">
<div class = "row">
<div class = "col-md-8">
<form>
<input type="text" id="searchbar" class="form-control" placeholder="Search XXX">
</form>
</div>
<div class="col-md-4" >
<button type="button" class="btn btn-primary">Create AAA</button>
<button type="button" class="btn btn-primary">Create BBB</button>
</div>
</div>
即使我将列设置为 9 和 3,按钮也会堆叠在下一行中。我尝试了 btn-group,结果相同。我希望创建 AAA 和创建 BBB 按钮 float 到右侧。有没有我可以从 Bootstrap 3 使用的 css 类,或者我应该编写自定义的 css 吗?
最佳答案
Bootstrap 的网格系统使用百分比表示 X/12 的大小,其中 X = 提供的数字(因此如果您使用 col-md-4
,它将是 4/12 = 33% ,或 宽度:33.33333333%
)。这会导致按钮/文本字段不会自动扩展以填充其余空间,因为预期的操作是不拉伸(stretch)。
如果将列更改为 9 和 3 导致按钮下降到下一行,您可以将列保留为 8 和 4,并在包含按钮的 div 中添加以下样式(是否将其设为内联样式[不推荐] 或创建自己的 css 类由您决定):
text-align: right;
这会将按钮向右移动,因为 float: right
不起作用。搜索栏和按钮将随着浏览器大小移动,但搜索栏和按钮之间的间隙仍然存在,因为我们已将按钮移至右侧。
Bootply: http://www.bootply.com/YDmOVoWvN3
关于css - Bootstrap 网格未利用页面的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24249278/