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

Question

嘿伙计们，我只是在玩 bootstraps col-md-* 并想出了以下复杂的例子，看看:

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-md-6中添加一个col-xs-12来解决这个问题

<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;} 它如何覆盖下面的部分文本。