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