推特引导:填充100%网格宽度包裹元素

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

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

我已经试着寻找边缘和衬垫，但找不到任何元素来弥补额外的空间，从而形成环绕效果。

我可以使用29%这样的值来代替最后一个按钮的"30%"宽度，但这违背了我的意愿。因为当屏幕宽度减小时，小的额外间隔变得越来越小。

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

按钮是内联块元素。你有两个选择：

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

或者对空格进行注释：http://www.bootply.com/RMoQw95WpJ

您必须正确使用网格系统

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

您可以使用calc设置宽度，请参阅fiddle：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>

相关内容

最新更新

热门标签：