web-dev-qa-db-fra.com

Ajouter un espacement horizontal entre les divs dans Bootstrap 3

Je souhaite inclure un petit espace horizontal entre les divs "Away Team" et "Baseball Field", présenté dans ce violon: http://jsfiddle.net/VmejS/ . J'ai essayé de modifier le remplissage, les marges, y compris les décalages de colonnes décimales, sans succès. 

Voici le code 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>
htmlcsstwitter-bootstraptwitter-bootstrap-3grid
13
steve_gallagher

La meilleure solution consiste à ne pas utiliser le même élément pour la colonne et le panneau:

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

et quelques autres styles:

#gameplay-baseball-field {
  padding-right: 10px;
  padding-left: 10px;
}
14
Rakhat Rakhmetov

Voulez-vous dire quelque chose comme ça? JSFiddle

Attribut utilisé:

margin-left: 50px;
2
Dodekeract

D'après ce que j'ai compris, vous voulez créer une barre de navigation ou quelque chose de similaire. Ce que je recommande de faire est de faire une liste et d’éditer les éléments à partir de là .

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

Et ainsi de suite ... Pour ajouter plus de catégories, ajoutez un autre ul. Maintenant, pour le CSS, vous n’avez besoin que de cela;

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