Question

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

enter image description here

我在CSS代码中找不到它。

我试图重复垂直方向，但似乎我没有实现这个目标：

enter image description here

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

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

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

Answer 2

您可以通过向按钮添加margin-bottom属性来执行此操作。在第一张图片中，它可能是float: right;，margin-right: 5px;

Answer 3

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

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

小提琴：here
屏幕：

Screen capture

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

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

Answer 4

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

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

（选择器是明确的，你应该做点什么）

Answer 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

更新：正如您在关于流体设计的评论中所提到的，这是一种 在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

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

5 个答案: