没有添加.col-xs-12到bootstrap coloumb，隐藏它，为什么？

Question

嘿伙计们，我刚刚和bootstraps col-md - *＆＃39; s，并提出了以下复杂的例子，看看：

HTML：

<div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-lg-6">
                    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.
                </div>
                <div class=" col-md-6 col-lg-6">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos commodi aliquam nostrum eius vel rem perferendis, qui sequi pariatur voluptas officia reprehenderit distinctio placeat. Minima nihil culpa atque suscipit deserunt.
                </div>
            </div>
        </div>

有一个小问题，宽度为980及以下，只有.col-md-12可见，我无法弄清楚为什么会发生这种情况？

FIDDLE HERE.

现在可以通过向第二个col-xs-12添加col-md-6来解决此问题，如下所示

<div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-lg-6">
                    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.
                </div>
                <div class="col-xs-6 col-md-6 col-lg-6">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos commodi aliquam nostrum eius vel rem perferendis, qui sequi pariatur voluptas officia reprehenderit distinctio placeat. Minima nihil culpa atque suscipit deserunt.
                </div>
            </div>
        </div>

但我真的很想知道是什么原因引起了我所展示的初始问题。

有人可以解释一下吗？

谢谢。

亚历-Z。

Answer 1

您可以在下面的屏幕截图中看到div设置为100px
div[class^="col-md-6"] {height: 100px;}它如何涵盖以下部分内容。

Answer 2

亲爱的，这是自举网格系统行为

班级.col-lg-仅在设备宽度（≥1200px）时可见 只有当设备宽度（≥992px）时，类.col-md-才可见 仅当设备宽度（≥768px）时，类.col-sm-才可见 班级.col-xs-始终可见。

请参阅下面的链接
http://getbootstrap.com/css/#grid-options

Answer 3

行为在媒体查询中

@media (min-width:1200px) {
    .col-lg-
}

当设备小于1200px时，此类不可见 如果你把一个.col-lg-*类放在宽度小于1200px的范围内;在css文件中找不到它，因此它将显示块并且不受任何浮动的影响
它将作为float:none代替float:left
等等..............