html - Bootstrap 网格自定义间距

Question

我对 Bootstrap 网格系统有不同大小的按钮(a 标签)有疑问。现在，我有 4 个不同大小的按钮，每个按钮占用 3 列。比如我有4个类似这样的:

<div class="col-md-3">  <a href="#page-join-us" class="btn-slider">Button Text Here</a>

    </div>

我当前的设置 (JSFiddle) 是:

http://jsfiddle.net/cov4ca1z/17/

目前，我并不担心当窗口缩小到移动尺寸时按钮如何重叠。理想情况下，我正在寻找的是这样的东西:

http://oi62.tinypic.com/wbp1sp.jpg

我试过几个不同的东西，但我找不到任何有用的东西。

谢谢。

Answer 1

Bootstrap 网格系统中的列宽是固定的。如果您将每个按钮放在自己的列中，它将受到该列大小的限制，并且它的行为将独立于您的其他按钮。因此，您的非常非常长的按钮将包含在它自己的列中。

这听起来像是您希望所有按钮彼此相邻显示，并让它们随着屏幕尺寸的扩展/收缩而一次环绕一个。我更新了你的 fiddle :

http://jsfiddle.net/cov4ca1z/24/

我将所有按钮放在它们自己的列中，并在您的 btn-slider 类中包含一个 float: left:

    <div class="col-md-12">
        <a href="#page-join-us" class="btn-slider">Medium</a>
        <a href="#your-progress" class="btn-slider">Very Very Very Very Long</a>
        <a href="#your-progress" class="btn-slider">Short</a>
        <a href="#your-progress" class="btn-slider">About Average Size</a>
    </div>