Html 在 Bootstrap 3 中添加 div 之间的水平间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19501636/
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
Adding horizontal spacing between divs in Bootstrap 3
提问by steve_gallagher
I want to include a small horizontal space between the "Away Team" and "Baseball Field" divs, as presented in this fiddle: http://jsfiddle.net/VmejS/. I have tried altering padding, margins, including decimal column offsets, all unsuccessfully.
我想在“客队”和“棒球场”div 之间包含一个小的水平空间，如这个小提琴所示：http: //jsfiddle.net/VmejS/。我曾尝试更改填充、边距，包括小数列偏移量，但均未成功。
Here is the html:
这是html：
<body>
<div class='container'>
<div class='row'>
<div class='col-md-12 panel' id='gameplay-title'>Title</div>
</div>
<div class='row'>
<div class='col-md-6 col-md-offset-3 panel' id='gameplay-scoreboard'>Scoreboard</div>
</div>
<div class='row'>
<div class='col-md-3 panel' id='gameplay-away-team'>Away Team</div>
<div class='col-md-6 panel' id='gameplay-baseball-field'>Baseball Field</div>
<div class='col-md-3 panel' id='gameplay-home-team'>Home Team</div>
</div>
<div class='row'>
<div class='col-md-6 col-md-offset-3 panel' id='gameplay-at-bat'>At Bat</div>
</div>
<div class='row'>
<div class='col-md-6 col-md-offset-3 panel' id='gameplay-game-report'>Game Report</div>
</div>
</div>
</body>
回答by Rakhat
The best solution is not to use the same element for column and panel:
最好的解决方案是不要对列和面板使用相同的元素：
<div class="row">
<div class="col-md-3">
<div class="panel" id="gameplay-away-team">Away Team</div>
</div>
<div class="col-md-6">
<div class="panel" id="gameplay-baseball-field">Baseball Field</div>
</div>
<div class="col-md-3">
<div class="panel" id="gameplay-home-team">Home Team</div>
</div>
</div>
and some more styles:
以及更多样式：
#gameplay-baseball-field {
padding-right: 10px;
padding-left: 10px;
}
回答by Florian Wendelborn
回答by Lae
From what I understand you want to make a navigation bar or something similar to it. What I recommend doing is making a list and editing the items from there. Just try this;
据我了解，您想要制作一个导航栏或类似的东西。我建议做的是制作一个列表并从那里编辑项目。试试这个；
<ul>
<li class='item col-md-12 panel' id='gameplay-title'>Title</li>
<li class='item col-md-6 col-md-offset-3 panel' id='gameplay-scoreboard'>Scoreboard</li>
</ul>
And so on... To add more categories add another ul in there. Now, for the CSS you just need this;
依此类推... 要添加更多类别，请在其中添加另一个 ul。现在，对于 CSS，你只需要这个；
ul {
list-style: none;
}
.item {
display: inline;
padding-right: 20px;
}
![Html 在移动网络浏览器中使用 input[type='file'] 捕获照片后，如何在画布中以正确的方向绘制照片？](/res/img/loading.gif)