引导程序 3 重叠

Question

我正在使用 Bootstrap 3，并希望我在下面的 JS Fiddle 演示中使用的这两个网格相互堆叠而不是重叠。

<div class="col-xs-12 col-md-8">

重叠

<div class="col-xs-6 col-md-4">

我只需要它们相互堆叠，这样“nav nav-pills nav-stacked”就不会被隐藏。

JS Fiddle example demo

这是 HTML 代码

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4">
            <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;">
                <li class="active"> <a href="#">link1</a>

                </li>
                <li> <a href="#">link2</a>

                </li>
                <li> <a href="#">link3</a>

                </li>
                <li> <a href="#">link4</a>

                </li>
            </ul>
        </div>
        <div class="col-xs-12 col-md-8">
            <div class="Rectangle_3_copy_2">
                <div class="Rounded_Rectangle_2"></div>
            </div>

Answer 1

你想让它堆叠吗？来自引导文档。

不希望您的列简单地堆叠在较小的设备中？通过将 .col-xs-* .col-md-* 添加到您的列来使用额外的中小型设备网格类。请参阅下面的示例，以更好地了解它是如何工作的。

因此，如果您删除 col-xs-*，它将堆叠。

Bootply Demo

Answer 2

你在追求这样的事情吗？ http://jsfiddle.net/KCnJg/4/

<div class="container">
<div class="row">
    <div class="col-xs-6 col-md-4">
        <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;">
            <li class="active"> <a href="#">link1</a></li>
            <li> <a href="#">link2</a></li>
            <li> <a href="#">link3</a></li>
            <li> <a href="#">link4</a></li>
        </ul>
    </div>
</div>
 <div class="row">       
    <div class="col-xs-12 col-md-8">
        <div class="Rectangle_3_copy_2">
            <div class="Rounded_Rectangle_2"></div>
        </div>
    </div>
</div>