it-swarm.com.ru

Добавление горизонтального расстояния между элементами в Bootstrap 3

Я хочу добавить небольшое горизонтальное пространство между div-элементами "Away Team" и "Baseball Field", как показано в этой скрипке: 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>
13
steve_gallagher

Лучшее решение - не использовать один и тот же элемент для столбца и панели:

<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;
}
14
Rakhat Rakhmetov

Вы имеете в виду что-то вроде этого? JSFiddle

Используемый атрибут:

margin-left: 50px;
2
Dodekeract

Из того, что я понимаю, вы хотите сделать панель навигации или нечто подобное. Я рекомендую сделать список и отредактировать элементы оттуда .... Просто попробуйте это;

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