Bootstrap网格不利用页面的整个宽度

Question

我正在使用Twitter Bootstrap 3.我需要填充＆＃34;行＆＃34;带有搜索栏和两个按钮。我的问题是行不会拉伸到页面的整个宽度。

这是它的样子：

<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>

即使我将cols设为9和3，按钮也会在下一行中叠加。我尝试了btn-group，结果相同。我想创建AAA和创建BBB按钮向右浮动。我可以从Bootstrap 3使用任何css类，还是应该编写自定义css？

Answer 1

Bootstrap的网格系统使用百分比将大小表示为X / 12，其中X =提供的数字（因此，如果您使用col-md-4，则为4/12 = 33％，或{ {1}}）。这导致按钮/文本字段不会自动扩展以填充剩余的空间，因为预期的操作是不拉伸。

如果将列更改为9和3会导致按钮拖放到下一行，则可以将列保持为8和4，并将以下样式添加到包含按钮的div中（无论是否使其成为内联样式[不推荐]或创建自己的css类取决于你）：

width: 33.33333333%

这会将按钮向右移动，因为text-align: right; 不起作用。搜索栏和按钮将随浏览器大小移动，但搜索栏和按钮之间的差距仍然存在，因为我们已将按钮移动到右侧。

Bootply： http://www.bootply.com/YDmOVoWvN3