首先,我要说的是我对 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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a>
                    </p>
                </div>
            </div>
            <footer class="wrath-content-box">
                Footer tagline &copy;
            </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网格填充。

您只需要像在第一栏中那样将类放在 bootstrap 内的单独的<div>中。

<div class="col-md-3">
  <div class="wrath-content-box">
    ...
  </div>
</div>

Demo

09-25 17:10
查看更多