9

是什么导致 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>
4

5 回答 5

13

我会做的是这样的：

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

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

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

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

于 2013-07-23T13:04:25.120 回答
2

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

于 2013-07-23T12:08:49.887 回答
2

这是row-fluid导致水平边距的类。
您可以制作 arow-fluid以row fluid获得垂直间距。
请参阅流体嵌套中的引导程序 - fluidGridSystem 。

您还应该使用span类来固定宽度
小提琴：这里
屏幕：

屏幕截图

这是我的代码：
警告删除<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>
于 2013-07-23T12:50:38.610 回答
0

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

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

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

于 2013-07-23T12:22:08.313 回答
0

检查代码后，您已将按钮对包装在 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>

更新小提琴

于 2013-07-23T12:48:30.930 回答