I want to include a small horizontal space between the "Away Team" and "Baseball Field" divs, as presented in this fiddle: http://jsfiddle.net/VmejS/. I have tried altering padding, margins, including decimal column offsets, all unsuccessfully.
Here is the 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>
This question is related to
html
css
twitter-bootstrap
twitter-bootstrap-3
grid
From what I understand you want to make a navigation bar or something similar to it. What I recommend doing is making a list and editing the items from there. Just try this;
<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>
And so on... To add more categories add another ul in there. Now, for the CSS you just need this;
ul {
list-style: none;
}
.item {
display: inline;
padding-right: 20px;
}
Source: Stackoverflow.com