Twitter Bootstrap按钮的水平和垂直分离 [英] Horizontal and vertical separation of Twitter Bootstrap's buttons

问题描述

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

What is causing Twitter Bootstrap's buttons horizontal separation?

我无法在CSS代码中找到它。

I can't find it in CSS code.

我是尝试对垂直重复相同的操作，但是似乎无法实现这一点：

I'm trying to repeat the very same for vertical, but it seems that I'm failing to achieve this:

仅当按钮垂直堆叠时，如何才能在按钮之间添加垂直间距（第二张图片），但避免使用相同的图片（在这种情况下则不必要）（不是第一张图片）？

How can I add vertical separation between buttons, only if they're stacked vertically (second picture), but avoiding the same (unnecessary in this case), when they're not (first picture)?

编辑：以前的代码生成以上图片：

EDIT: Code used to generate above pictures:

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

推荐答案

我要做的是这样的：

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

所以我在每个按钮周围增加了2px的边距，并减少了容器（.well）2像素。这样，您的全宽样式将保持不变，并且窄样式现在在按钮之间将具有4像素的间距。

So I addedd a margin of 2px around each button, and reduced the padding of the container (.well) by 2 pixels. This way your 'full width' style remains unchanged, and the 'narrow' style will now have a 4 pixel spacing between the buttons.

您可能需要添加一些额外的内容id或这些选择器前面的内容，以使其仅在您的＃menu-buttons上起作用

You may want to ad an extra id or something in front of those selectors, to make it only work on your "#menu-buttons"

还有一个示例： http://jsfiddle.net/eHYnQ/

这篇关于Twitter Bootstrap按钮的水平和垂直分离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！