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

【问题标题】：Adding horizontal spacing between divs in Bootstrap 3在 Bootstrap 3 中添加 div 之间的水平间距
【发布时间】：2013-10-30 08:45:51
【问题描述】：

我想在“客队”和“棒球场”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>

【问题讨论】：

嘿史蒂夫，你为什么要在垂直堆叠的项目之间有一个水平空间？不确定我是否关注这里。您是否希望这两项专门内联并带有空格？
我在这里找到了答案。 stackoverflow.com/questions/18071055/…
你为什么使用'而不是"？
有人弄清楚堆叠物品之间的“小水平空间”是什么意思吗？我真的很好奇！

标签： html css twitter-bootstrap twitter-bootstrap-3 grid

【解决方案1】：

你的意思是这样的吗？ JSFiddle

使用的属性：

margin-left: 50px;

【讨论】：

我仍然希望 div 位于同一行。添加边距会将最后一个 div 推到我不希望它在的位置。
好吧，你并没有真正表达出来。我假设您可能想要制作类似导航的东西，因为这是“它们之间的水平空间”的最接近的近似值 - 我的第一个想法是“为什么要在这两者之间有一条带有一些空格的空线”

【解决方案2】：

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

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

【讨论】：

这不会使中间的 div 比其他的更薄，从而导致外观不均匀吗？

【解决方案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;
}

【讨论】：