Html 将twitter引导从3.0.0更新到3.1.1时出现布局问题

我有一个网站，使用twitter引导进行响应性布局。我从3.0.0版升级到3.1.1版，我的布局发生了变化，我不知道为什么

下面是一些简化的JSFIDLE，它们显示了这个问题：

这些小提琴的唯一区别是引导版本。我已经查看了，但看不到导致此问题的任何明显原因

对于代码/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>

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;
}

---

我已经设法解决了这个问题，主要是通过创建和查看上面的简化JSFIDLE

问题在于我使用了

.container

类，现在我用

.container fluid

替换了它，问题就消失了

以下问题的答案可能有助于未来用户偶然发现与我相同的问题：

---

我已经设法解决了这个问题，主要是通过创建和查看上面的简化JSFIDLE

问题在于我使用了

.container

类，现在我用

.container fluid

替换了它，问题就消失了

以下问题的答案可能有助于未来用户偶然发现与我相同的问题：

---

您经常在可能不需要的时候使用类

容器

，甚至可以用

容器液体

替换

到处都有那么多的填充可能会限制您在主父级中的空间

仅在必要时使用

容器液体

或

容器

。以下声明直接摘自本页：

行必须放置在.container（固定宽度）或 .容器液体（全宽），以便正确对齐和填充

试着在主div（大多数父包装器）上放置

container

，使其具有固定的宽度，或者从子div中移除

container

，使其在父div中流动，或者给它们

container fluid

，使其具有

最大宽度：100%

，并添加一些额外的填充

---

您经常在可能不需要的时候使用类

容器，或者甚至可以用
容器流体替换

到处都有那么多的填充可能会限制您在主父级中的空间

仅在必要时使用
容器液体
或
容器
。以下声明直接摘自本页：

行必须放置在.container（固定宽度）或
.容器液体（全宽），以便正确对齐和填充

试着在主div（大多数父包装器）上放置
container
，使其具有固定的宽度，或者从子div中移除
container
，使其在父div中流动，或者给它们
container fluid
，使其具有
最大宽度：100%
，并添加一些额外的填充

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

在这里的博客条目中，他们说：

移除手动全宽容器标注，因为有.container流体

如果替换
，则布局可以正常工作

我想说，您有许多不需要的
容器
类。您的HTML可能会被大量裁剪：
我认为是因为他们重新引入了
.container fluid
类（最初将其取出，然后放回以下反馈中）。重新引入后，它们不会在
.container
类上设置
max width
，而是根据媒体查询设置显式宽度

在这里的博客条目中，他们说：

移除手动全宽容器标注，因为有.container流体

如果替换
，则布局可以正常工作

我想说，您有许多不需要的
容器
类。您的HTML可能会被大量修剪：
如果我拉伸输出面板，标题徽标就会消失？哇，这是一个奇怪的问题哈哈。等一下，我看看发生了什么。如果我拉伸输出面板，标题徽标就会消失？哇，这是个奇怪的问题哈哈。等一下，我看看发生了什么。