Question

我希望在“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>

Answer 1

最佳解决方案是不要对列和面板使用相同的元素：

<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;
}

Answer 2

你是说这样的意思吗？ JSFiddle

使用的属性：

margin-left: 50px;

Answer 3

根据我的理解，您想要制作导航栏或类似的东西。我建议做的是制作一个列表并从那里编辑项目。试试这个;

<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>

等等......要添加更多类别，请在其中添加另一个ul。现在，对于CSS你只需要这个;

ul {
    list-style: none;
}
.item {
    display: inline;
    padding-right: 20px;
}

在Bootstrap 3中添加div之间的水平间距

3 个答案: