CSS Twitter Bootstrap 按钮的水平和垂直分离
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17809671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal and vertical separation of Twitter Bootstrap's buttons
提问by trejder
What is causing Twitter Bootstrap's buttons horizontal separation?
是什么导致 Twitter Bootstrap 的按钮水平分离？
I can't find it in CSS code.
我在 CSS 代码中找不到它。
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>
回答by Pevara
What I would do is something like this:
我会做的是这样的：
.btn {
margin: 2px;
}
.well {
padding: 7px;
}
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.
所以我在每个按钮周围添加了 2px 的边距，并将容器 (.well) 的填充减少了 2 个像素。这样，您的“全宽”样式保持不变，“窄”样式现在按钮之间的间距为 4 像素。
You may want to ad an extra id or something in front of those selectors, to make it only work on your "#menu-buttons"
您可能希望在这些选择器前面添加一个额外的 id 或其他内容，以使其仅适用于您的“#menu-buttons”
And an example: http://jsfiddle.net/eHYnQ/
和一个例子：http: //jsfiddle.net/eHYnQ/
回答by Mohamed Amine
You can do it by adding a margin-bottomproperty to your buttons. In the first picture, it's probably a float: right;with a margin-right: 5px;
您可以通过向margin-bottom按钮添加属性来实现。在第一张图片中，它可能是一个float: right;带有margin-right: 5px;
回答by Done
It's the row-fluidclass who causes the horizontal margin.
You can make a row-fluidin a row fluidto get vertical spacing.
See the bootstrap - fluidGridSystemat Fluid nesting..
这是row-fluid导致水平边距的类。
您可以在 arow-fluid中创建一个row fluid以获得垂直间距。
请参阅流体嵌套中的引导程序 - fluidGridSystem。
您还应该使用
spanspan类来固定宽度小提琴： here这里
屏幕：
Here is my code :
WarningRemove the <div class="span3" style="background-color:whitesmoke">for a full screen wide div
这是我的代码：
警告删除<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>
回答by quinnirill
You can try building on the following:
您可以尝试构建以下内容：
#menu-buttons a:first-child {
margin-bottom: 3px;
}
(The selector is overtly specific, you should do something about that)
（选择器非常具体，您应该对此做些什么）
回答by Praveen
Upon checking your code, you have wrapped button pair inside a div.
检查您的代码后，您已将按钮对包装在一个 div 中。
So instead of having %value change to px
因此，而不是将%值更改为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>
Check this JSFiddle
检查这个JSFiddle
Updates:As you mentioned in comments about fluid design, here is a simple way to do it in HTML <br/>tag to get line breaks.
更新：正如您在关于流体设计的评论中提到的，这里有一种在 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>
