Html 在 Bootstrap 3 中的面板之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19500880/
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
Add spaces between panels in Bootstrap 3
提问by greenafrican
I'm using Bootstrap 3.0 and can't seem to figure out how to add padding / space between panels.
我正在使用 Bootstrap 3.0，似乎无法弄清楚如何在面板之间添加填充/空间。
<div class="row">
<div class="col-xs-4 panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
<div class="col-xs-4 panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
<div class="col-xs-4 panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
I have tried adding a class and setting the width to 30% but it only works if you have two panels and pull the one right. If I add a margin then it throws the responsiveness off and the last cell drops to the next line.
我曾尝试添加一个类并将宽度设置为 30%，但只有当您有两个面板并将其中一个拉到右侧时才有效。如果我添加一个边距，那么它会关闭响应，最后一个单元格会下降到下一行。
How can I responsively add a gap between the panels?
如何响应地添加面板之间的间隙？
回答by isherwood
I'd be inclined to not combine .panel and .col*:
我倾向于不结合 .panel 和 .col*：
http://jsfiddle.net/isherwood/xTc7a/1/
http://jsfiddle.net/isherwood/xTc7a/1/
<div class="row">
<div class="col-xs-4">
<div class=" panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class=" panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
</div>
回答by Able Alias
change the html like below,
像下面一样更改html，
<div class="row">
<div class="col-xs-4">
<div class="panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
</div>
回答by dnxit
you can use like this and divide to any number of columns as you like.
您可以像这样使用并根据需要划分为任意数量的列。
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
<div class=" panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
<div class=" panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
</div>
</div>
</div>
回答by greenafrican
I managed to get this to work by adding a class panel-4 to the first 2 panels:
我设法通过向前 2 个面板添加一个类 panel-4 来使其工作：
.panel-4 {
width:30%;
margin-right:5%;
}
