JSFiddle - Working with 3.0.0

JSFiddle - Failing with 3.1.1

这些小提琴的唯一区别是bootstrap版本。我已审核了releases，但无法看到导致此问题的任何明显因素。

对于代码/ css数量的道歉，我试图将其减少到最低限度。

我的加价：

<div class="body-panel container">
    <div class="container header">
        <div class="col-md-12">
            <div class="row">
                <div style="width: 100%; max-width: 716px;">
                     <h1>Header logo</h1>

                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-default container center">        
        <div class="container navbar-inner">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 
                    data-toggle="collapse" data-target=".navbar-collapse"> 
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content grey-panel">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="container col-sm-12 home-bg">
                        <div class="container col-sm-5">
                             <h1>Header Text</h1>

                            <p>Some Content:</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

自定义Css：

body {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ABC6A3;
}
.body-panel {
    background-color: #fff;
    max-width: 345px;
    padding: 15px;
    border-radius: 10px;
}
.navbar .nav, .navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline;
    /* ie7 fix */
    *zoom: 1;
    /* hasLayout ie7 trigger */
    vertical-align: top;
}
.navbar-default {
    background-color: #fff;
    border-color: #fff;
}
.navbar-inner {
    text-align: center;
}
.header {
    background-color: #ccc;
    text-align: center;
}

.grey-panel {
    background-color: #ccc;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
}

Answer 1

我设法解决了这个问题，主要是创建和查看上面简化的JSFiddles。

问题在于我使用了.container类，我现在用.container-fluid替换了该类，问题就消失了。

JSFiddle - Working with 3.1.1

以下问题的答案可能有助于未来用户遇到与我相同的问题：

<强> bootstrap 3.1 container-fluid vs container

Answer 2

您可能经常使用课程container，可能不需要，或者甚至可以用container-fluid替换。

在任何地方都有这么多的填充可能会限制你在主要父母中的空间。

必要时仅使用container-fluid或container。以下声明直接来自Bootstrap CSS页面：

行必须放在.container（固定宽度）或 .container-fluid（全宽），用于正确对齐和填充。

尝试在主div（大多数父包装器）上使用container使其成为固定宽度，并从子div中删除container以使其在父级中流动，或者给它们container-fluid让他们拥有max-width: 100%以及一些额外的填充。

WORKING EXAMPLE

Answer 3

我认为因为他们重新引入了.container-fluid类（它最初被取出，然后放回到以下反馈中）。重新引入后，不是在max-width类上设置.container，而是根据媒体查询设置显式宽度。

在这里的博客条目http://blog.getbootstrap.com/2014/02/13/bootstrap-3-1-1-released/中，他们说：

现在删除手动全角容器标注，其中包含.container-fluid

如果您将<div class="container>替换为<div class="container-fluid>。

，您的布局就有效

我会说你有一些你不需要的container课程。您的HTML可以大量修剪： Fiddle

将twitter-bootstrap从3.0.0更新到3.1.1时的布局问题

JSFiddle - Working with 3.0.0

JSFiddle - Failing with 3.1.1

3 个答案:

JSFiddle - Working with 3.1.1