Question

我有一个问题，当使用Twitter Bootstrap网格系统时，网格中包含的元素围绕行的末尾包裹，尽管所有包含的元素的宽度在一起是100％。

插图如下： http://www.bootply.com/KEm1U4bDVP

我试图找到边距和填充但是找不到任何构成额外空间的元素来导致环绕。

而不是使用“30％”宽度作为最后一个按钮，我可以使用像29％这样的值，但这违背了我的意愿。因为当屏幕宽度减小时，额外的间距变得越来越小。

如何让按钮保持在一排而不被包裹？

Answer 1

按钮是内联块元素。您有两种选择：

浮动元素：http://www.bootply.com/drrFPKsDPY

或评论空格：http://www.bootply.com/RMoQw95WpJ

Answer 2

您必须正确使用网格系统

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
          </div>
        </div>
    </div>
</div>

Answer 3

您可以使用calc设置宽度，请参阅小提琴：https://jsfiddle.net/eye4ytq2/1/

<button class="btn btn-primary" style="width: calc(30% - 5px)">1</button>
<button class="btn btn-primary" style="width: 40%">2</button>
<button class="btn btn-primary" style="width: calc(30% - 5px)">3</button>

Twitter Bootstrap：填充100％网格宽度包装元素

3 个答案: