13

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

3 回答 3

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;
}
于 2014-08-08T06:30:27.483 回答
2

你的意思是这样的吗？ JSFiddle

使用的属性：

margin-left: 50px;
于 2013-10-21T18:14:52.967 回答
1

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

<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;
}
于 2013-10-21T19:52:55.933 回答