让我先说一下，我对bootstrap相对较新，可能没有正确地对行/列布局进行整理。
我正在处理的布局可以在这里看到：http://jsfiddle.net/5NFXY/（下面粘贴的代码）
右侧的“侧边栏”是问题发生的地方。我有一个.col-md-9和一个.col-md-3，其中包含.row，但由于某种原因，侧边栏的右侧与其容器没有正确对齐。在玩了很长一段时间之后，我发现如果我从margin-right: -15px;删除.row问题就会消失，但肯定这不是'正确的解决方案而且我已经搞砸了方式。我的问题是，我在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
答案 0 :(得分：5)
您已将自定义类wrath-content-box与引导程序col-md-3类合并，并且类上的填充将覆盖Bootsrap网格填充。
您只需将您的课程放在引导程序中的单独<div>内，就像您在第一列中所做的那样。
<div class="col-md-3">
<div class="wrath-content-box">
...
</div>
</div>
<强> Demo