ste*_*her 13 html css grid twitter-bootstrap twitter-bootstrap-3
我想在"Away Team"和"Baseball Field"div之间加一个小的水平空间,如这个小提琴:http://jsfiddle.net/VmejS/.我试过改变填充,边距,包括十进制列偏移,都没有成功.
这是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>
Rak*_*hat 14
最好的解决方案是不要对列和面板使用相同的元素:
<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>
还有一些风格:
#gameplay-baseball-field {
padding-right: 10px;
padding-left: 10px;
}