Twitter Bootstrap按钮的水平和垂直分离

Question

是什么导致Twitter Bootstrap的按钮水平分离？

我在CSS代码中找不到它.

我试图重复垂直方向,但似乎我没有达到这个目的:

我怎样才能在按钮之间添加垂直分隔,只有它们是垂直堆叠的(第二张图片),但是当它们不是(第一张图片)时,避免相同(在这种情况下是不必要的)？

编辑:用于生成上述图片的代码:

<div class="container-fluid">

    <div class="row-fluid">

        <div class="well well-small" id="menu-buttons">

            <div class="pull-left" style="width: 48%">

                <a class="btn btn-small">@ Style ^</a>
                <a class="btn btn-small">@ Language ^</a>

            </div>

            <div class="pull-right text-right" style="width: 48%;">

                <a class="btn btn-small">@ Device</a>
                <a class="btn btn-small">@ Webpage</a>

            </div>

            <div style="clear: both"></div>

        </div>

    </div>

</div>

Answer 1

我会做的是这样的事情:

.btn {
    margin: 2px;
}
.well {
    padding: 7px;
}

所以我在每个按钮周围添加了2px的边距,并将容器(.well)的填充减少了2个像素.这样,您的"全宽"样式保持不变,"窄"样式现在按钮之间的间距为4像素.

您可能希望在这些选择器前面添加额外的ID或其他内容,以使其仅适用于您的"#menu-buttons"

一个例子:http://jsfiddle.net/eHYnQ/