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

【问题标题】：Horizontal and vertical separation of Twitter Bootstrap's buttonsTwitter Bootstrap 按钮的水平和垂直分离
【发布时间】：2015-01-06 11:02:32
【问题描述】：

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

我在 CSS 代码中找不到它。

我正在尝试对垂直重复同样的操作，但似乎我无法做到这一点：

如何在按钮之间添加垂直分隔，只有当它们垂直堆叠（第二张图片），但避免相同（在这种情况下不必要）时，它们不是（第一张图片）？

EDIT：用于生成上述图片的代码：

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

【问题讨论】：

如果你显示你的代码会更容易回答。我的猜测是这与浮动有关，从网络检查器中查看“@Device”和“@Webpage”按钮是否定义了浮动值。
用inline-block 将这些按钮包装在div 中。如果是因为浮动使用clear: both
@quinnirill：抱歉，错过了。这是代码更新后的问题。

标签： css twitter-bootstrap

【解决方案1】：

我会做这样的事情：

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

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

您可能希望在这些选择器前面添加一个额外的 id 或其他内容，以使其仅适用于您的“#menu-buttons”

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

【讨论】：

伙计，看来你的解决方案很厉害！让我再做一些检查，但看起来确实很有希望。
我不明白为什么 bootstrap 没有为 margin top 准备的类

【解决方案2】：

您可以通过向按钮添加margin-bottom 属性来实现。在第一张图片中，可能是float: right; 和margin-right: 5px;

【讨论】：

这是第一件事，我想到了，但它不会起作用。永久添加margin-bottom（在这两种情况下）会在按钮和围绕它们的井的底部边框之间产生不可接受的额外空间，在第一种情况下（当按钮未垂直堆叠时）。

【解决方案3】：

导致水平边距的是 row-fluid 类。
您可以在 row fluid 中创建 row-fluid 以获得垂直间距。
请参阅流体嵌套中的bootstrap - fluidGridSystem。

您还应该使用span 类来修复宽度

小提琴：here
屏幕：

这是我的代码：
警告删除 <div class="span3" style="background-color:whitesmoke"> 以获得全屏宽 div

<!Doctype html>
<html>
<head>
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
        <div class="span3" style="background-color:whitesmoke">
            <div class="row-fluid">

                <div class="row-fluid">

                    <div class="span6">
                        <button>1</button>
                    </div>
                    <div class="span6">
                        <button class="pull-right">2</button>
                    </div>

                </div>

                <div class="row-fluid">

                    <div class="span6">
                        <button>3</button>
                    </div>
                    <div class="span6">
                        <button class="pull-right">4</button>
                    </div>

                </div>

            </div>
        </div>
</body>
</html>

【讨论】：

我把你的代码放在我的里面，不管用container-fluid包围它，在这两种情况下我都看到了一些奇怪的结果——每个按钮都在一个单独的行中。也许我错过了什么？这完全不是我要找的。结果与我的照片上显示的完全不同。您是否有一些小提琴要介绍，您的解决方案确实有效。
啊，我明白了。您的灵魂在宽屏分辨率下完美运行。但在移动设备上完全失败。
移除 div span3 以供移动使用
接受分析器所以;)
抱歉，PeterVR 的解决方案效果更好，我决定使用他的。此外，您的解决方案（在删除div span3 之后）在桌面浏览器中运行良好，当它的大小调整为非常小的（类似移动设备的）大小时。但是，当相同的解决方案被编译为 PhoneGap 应用程序（或在 Ripple Emulator 下运行）时，它不再工作了——我看到所有四个按钮，每个按钮都在单独的行中。不知道，为什么。也许这与每英寸像素密度有关？无论如何，PeterVR 的解决方案在所有情况下都有效，所以我会接受他的回答，对不起。

【解决方案4】：

您可以尝试构建以下内容：

#menu-buttons a:first-child {
  margin-bottom: 3px;
}

（选择器非常具体，你应该做点什么）

【讨论】：

这行不通——请参阅我对上面 Amine 回答的评论。当按钮垂直堆叠但看起来很丑（每组中的第一个和第二个按钮未对齐）时，工作正常，当它们没有堆叠并且都在一行中时。

【解决方案5】：

检查您的代码后，您已将按钮对包装在一个 div 中。

所以不要将 % 值更改为 px

<div class="pull-left" style="width: 115px; "> <a class="btn btn-small">@ Style ^</a>
 <a class="btn btn-small">@ Language ^</a>

</div>
<div class="pull-right text-right" style="width: 115px;"> <a class="btn btn-small">@ Device</a>
 <a class="btn btn-small">@ Webpage</a>

</div>

查看JSFiddle

更新：正如您在 cmets 中提到的流体设计，这是一个 在 HTML <br/> 标签中获取换行符的简单方法。

<div class="pull-left" style="width: 38% "> <a class="btn btn-small">@ Style ^</a>
    <br/> <a class="btn btn-small">@ Language ^</a>

</div>
<div class="pull-right text-right" style="width: 38%"> <a class="btn btn-small">@ Device</a>
    <br/> <a class="btn btn-small">@ Webpage</a>

</div>

Updated Fiddle

【讨论】：

如您所见（顶部 div 中的 container-fluid 和 row-fluid 类）这是一个流畅的布局，因此以像素为单位提供绝对值根本不是一种选择。旁注：我打开了你的 jsFiddle，在两个按钮组中没有看到垂直分隔。
在你的两个小提琴（原始和更新的一个）中，我看到两组中的按钮垂直堆叠，它们之间没有分隔（空格）。事实上，我看到它们几乎和我的第二张照片一样。同样，当我在我的项目中使用您的代码时。这就是为什么我说这不起作用——按钮之间没有垂直分隔。