css - Bootstrap 网格未利用页面的整个宽度

Question

我正在使用 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 吗？

Answer 1

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