webentwicklung-frage-antwort-db.com.de

Horizontalen Abstand zwischen divs in Bootstrap 3 hinzufügen

Ich möchte einen kleinen horizontalen Abstand zwischen den Divs "Away Team" und "Baseball Field" einfügen, wie in dieser Geige dargestellt: http://jsfiddle.net/VmejS/ . Ich habe versucht, die Polsterung, die Ränder einschließlich der Dezimalstellen-Versätze zu ändern, alles erfolglos. 

Hier ist das 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

Die beste Lösung ist, nicht dasselbe Element für Spalte und Panel zu verwenden:

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

und einige weitere Stile:

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

Meinst du so etwas? JSFiddle

Verwendetes Attribut:

margin-left: 50px;
2
Dodekeract

Nach meinem Verständnis möchten Sie eine Navigationsleiste oder ähnliches erstellen. Was ich empfehle zu tun, ist das Erstellen einer Liste und das Bearbeiten der Elemente von dort aus.

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

Und so weiter ... Um weitere Kategorien hinzuzufügen, fügen Sie dort ein weiteres ul hinzu. Nun, für das CSS brauchen Sie das nur;

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