Bootstrap de la création d'un rembourrage supplémentaire sur la colonne de la rangée
Permettez-moi de commencer par dire que je suis relativement nouveau à l'amorçage et peut-être pas udnerstanding de la ligne/colonne mises en page correctement.
La mise en page je suis en train de travailler sur peut être vu ici: http://jsfiddle.net/5NFXY/ (code collé ci-dessous)
La barre de menu sur la droite est où le problème est survenu. J'ai un .col-md-9 et un .col-md-3 enfermé dans un .row, mais pour une raison quelconque le côté droit de la barre latérale n'est pas en alignant correctement avec son conteneur. Après avoir joué avec pendant un certain temps, j'ai constaté que si je supprime margin-right: -15px; de la .row le problème disparaît, mais sûrement, ce n'est pas la bonne solution et j'ai jeté quelque chose le long de la voie. Ma question est, ai-je fait quelque chose de mal dans mon code HTML ou est la bonne solution pour remplacer manuellement que margin-right: -15px;?
HTML
<body>
<div class="container">
<div class="logo-header">
<h1>Header</h1>
<h4>Subheader</h4>
</div>
<div class="inner-container clearfix">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Operations <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Get Started</li>
<li><a href="#">Start New</a></li>
<li><a href="#">View All</a></li>
<li class="divider"></li>
<li class="dropdown-header"> Settings</li>
<li><a href="#">Manage Types</a></li>
<li><a href="#">Manage Types</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Utilities <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Forums</a></li>
<li class="divider"></li>
<li><a href="#">Distance</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">News</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Alts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row">
<div class="col-md-9">
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
</div>
<div class="col-md-3 wrath-content-box">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
</div>
<footer class="wrath-content-box">
Footer tagline ©
</footer>
</div> <!-- /inner-container -->
</div> <!-- /container -->
</body>CSS
body {
padding-top: 20px;
padding-bottom: 20px;
background: url('../img/wh-background-1.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
margin-bottom: 20px;
}
.logo-header {
color: #FFF;
}
.logo-header h1 {
margin-bottom: 0;
}
.logo-header h4 {
margin-top: 0;
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}
.inner-container {
background: rgba(119, 119, 119, .5);
border-radius: 6px;
padding: 20px;
}
.wrath-content-box {
border-color: #e7e7e7;
background-color: #f8f8f8;
border-radius: 6px;
padding: 15px;
}
.news-post {
margin-bottom: 20px;
}À L'Aide De: Bootstrap 3.0.3 + Jquery 1.10.1
OriginalL'auteur Josh Mountain | 2014-01-17
Vous devez vous connecter pour publier un commentaire.
Vous avez combiné de votre classe personnalisée
wrath-content-boxavec le bootstrapcol-md-3classe et le rembourrage sur votre classe est remplacer le Bootsrap grille de rembourrage.Il vous suffit de mettre votre classe dans un autre
<div>à l'intérieur de l'amorçage de l'un comme vous l'avez fait dans la première colonne.Démo
Ouais personnellement, j'essaie de garder le Bootstrap grille de classes sur leur propre, tend à rendre le code un peu plus clair.
OriginalL'auteur davidpauljunior