Question

我有一个问题，即使用自举网格系统使用不同大小的按钮（标签）。现在，我有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网格系统中的列宽是固定的。如果将每个按钮放在它自己的列中，它将受到该列大小的限制，并且它将独立于其他按钮。所以，你非常长的按钮将包含在它自己的列中。

听起来你希望所有的按钮彼此相邻，并在屏幕尺寸扩大/缩小时让它们一次包裹一个。我更新了你的小提琴：

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

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

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

Answer 2

为什么不做这样的事情？

<ul id="buttonList" class="list-inline">
<li><a href="#page-join-us" class="btn-slider">Medium Size</a></li>
<li><a href="#your-progress" class="btn-slider">Very Very Very Very Long</a></li>
</ul>

然后使用CSS设置ul#buttonList li{}样式以根据需要调整边距。

Bootstrap网格自定义间距

2 个答案: