首先让我说我对 bootstrap 比较陌生，可能没有正确理解行/列布局。
我正在处理的布局可以在这里看到:http://jsfiddle.net/5NFXY/ (下面粘贴代码)
右侧的“侧边栏”是出现问题的地方。我有一个 .col-md-9 和一个 .col-md-3 包含在 .row 中，但由于某种原因，正确的侧边栏的一侧未与其容器正确对齐。在玩了一段时间之后，我发现如果我从 .row 中删除 margin-right: -15px; 问题就消失了，但这肯定是'正确的解决方案，我一路上搞砸了一些东西。我的问题是，我是不是在我的 HTML 中做错了什么，或者是否真的是手动覆盖 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;
}
使用:Bootstrap 3.0.3 + Jquery 1.10.1
最佳答案
您已经合并了自定义类 wrath-content-box使用 Bootstrap col-md-3类和类上的填充覆盖了 Bootsrap 网格填充。
你只需要将你的类放在一个单独的 <div> 中在 Bootstrap 中，就像您在第一列中所做的那样。
<div class="col-md-3">
<div class="wrath-content-box">
...
</div>
</div>
关于css - Bootstrap 在行中的列上创建额外的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21178198/