Question

我正在使用bootstrap网格系统出了问题。我无法弄清楚如何堆叠三个＆＃34;细胞＆＃34; col-md-8和三个＆＃34;细胞＆＃34;在桌面模式下，col-md-4垂直/相互上方。

列的大小都相同，所以应该可以使用。

当前代码在移动视图中完全按照我的要求运行：http://snag.gy/obRKH.jpg

但在桌面视图中，它看起来完全错了。见图片，红色=不需要的＆＃34;空间＆＃34;。蓝色箭头是我想移动列的位置：http://snag.gy/voo7V.jpg

示例代码

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h1>Lorem</h1>
            <p>Consectetur adipiscing elit. Ut quam lacus, fermentum vitae eros id, semper rutrum nibh. Vestibulum elementum leo vel eros hendrerit rutrum. Fusce aliquam fringilla leo, sit amet ullamcorper nisi sagittis vitae. Sed ut accumsan risus. Fusce eu ex ullamcorper, cursus ipsum vitae, hendrerit justo.</p>
        </div>
        <div class="col-md-4">
            <h3>Sollicitudin</h3>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Maecenas elementum lectus et risus sollicitudin, ut ultricies enim placerat.</li>
                <li>Quisque sed odio eget libero cursus auctor.</li>
            </ul>

            <ul>
                <li>Sed semper justo in nunc pellentesque dictum.</li>
                <li>Pellentesque hendrerit orci ut lectus suscipit elementum.</li>
                <li>In a massa vel urna pellentesque congue at in dui.</li>
            </ul>
        </div>

        <div class="col-md-8">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum porta mollis. Integer vitae massa vitae nisl mattis venenatis ut a velit. Nulla eget purus nulla. Donec ac velit tellus. Sed molestie porttitor justo ut efficitur. Nam ac sagittis nibh, vitae malesuada tellus. Sed sodales erat purus, ac aliquet elit.</p> <p>Justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p> <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim.</p>
        </div>
        <div class="col-md-4">
            <h3>Pellentesque</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla ipsum, non posuere elit.</p>
        </div>

        <div class="col-md-8">
            <h2>Donec efficitur</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet lorem sit amet eros faucibus maximus ut id dolor. Sed luctus vulputate lacinia. Proin venenatis massa odio, eu pretium nunc venenatis sed. Nullam et sem tortor. Donec efficitur euismod ligula a gravida. Donec eu nulla quis elit bibendum malesuada.</p> <p>Duis turpis orci, posuere ut magna non, sollicitudin iaculis arcu. Proin interdum, nunc et semper efficitur, est turpis volutpat justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p> <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim. Vestibulum turpis metus, imperdiet sed sagittis eget, porta et ipsum. Aenean consectetur augue id arcu scelerisque, viverra volutpat justo auctor. Maecenas malesuada nisi vitae augue ornare lacinia. Quisque vel massa felis. Morbi vehicula augue scelerisque dignissim dictum. Proin mattis leo laoreet dui molestie tempor. Pellentesque a elit id augue sagittis blandit sed sit amet dolor. Suspendisse tellus nunc, aliquam at ante molestie, pulvinar iaculis sem. Suspendisse quis porttitor massa. Cras pharetra luctus nisl.</p>
        </div>
        <div class="col-md-4">
            <h3>Fusce</h3>
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
        </div>

        <div class="col-md-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce.</p>
        </div>
    </div>
</div>

修改

我自己可能已经解决了 - 请参阅更新的JSfiddle：http://jsfiddle.net/vdexv26g/2/

这是正确的方法吗？

Answer 1

你确实达到了你想要的效果，但是你必须添加像浮动等等的CSS规则。这些规则的改变可能会破坏你的网站，而正确的方法就是使用bootstrap的样式本身。检查以下代码：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <p>Consectetur adipiscing elit. Ut quam lacus, fermentum vitae eros id, semper rutrum nibh. Vestibulum elementum leo vel eros hendrerit rutrum. Fusce aliquam fringilla leo, sit amet ullamcorper nisi sagittis vitae. Sed ut accumsan risus. Fusce eu ex ullamcorper, cursus ipsum vitae, hendrerit justo.</p>
            </div>
            <div class="row">
                 <h2>Lorem ipsum</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum porta mollis. Integer vitae massa vitae nisl mattis venenatis ut a velit. Nulla eget purus nulla. Donec ac velit tellus. Sed molestie porttitor justo ut efficitur. Nam ac sagittis nibh, vitae malesuada tellus. Sed sodales erat purus, ac aliquet elit.</p>
                <p>Justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p>
                <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim.</p>
            </div>
            <div class="row">

<h2>Donec efficitur</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet lorem sit amet eros faucibus maximus ut id dolor. Sed luctus vulputate lacinia. Proin venenatis massa odio, eu pretium nunc venenatis sed. Nullam et sem tortor. Donec efficitur euismod ligula a gravida. Donec eu nulla quis elit bibendum malesuada.</p>
                <p>Duis turpis orci, posuere ut magna non, sollicitudin iaculis arcu. Proin interdum, nunc et semper efficitur, est turpis volutpat justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p>
                <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim. Vestibulum turpis metus, imperdiet sed sagittis eget, porta et ipsum. Aenean consectetur augue id arcu scelerisque, viverra volutpat justo auctor. Maecenas malesuada nisi vitae augue ornare lacinia. Quisque vel massa felis. Morbi vehicula augue scelerisque dignissim dictum. Proin mattis leo laoreet dui molestie tempor. Pellentesque a elit id augue sagittis blandit sed sit amet dolor. Suspendisse tellus nunc, aliquam at ante molestie, pulvinar iaculis sem. Suspendisse quis porttitor massa. Cras pharetra luctus nisl.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                 <h3>Sollicitudin</h3>

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                    <li>Maecenas elementum lectus et risus sollicitudin, ut ultricies enim placerat.</li>
                    <li>Quisque sed odio eget libero cursus auctor.</li>
                </ul>
                <ul>
                    <li>Sed semper justo in nunc pellentesque dictum.</li>
                    <li>Pellentesque hendrerit orci ut lectus suscipit elementum.</li>
                    <li>In a massa vel urna pellentesque congue at in dui.</li>
                </ul>
            </div>
            <div class="row">
                 <h3>Pellentesque</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla ipsum, non posuere elit.</p>
            </div>
            <div class="row">
                 <h3>Fusce</h3>

                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
            </div>
        </div>
    </div>

将行分为两列，然后向这些列添加行。您可以将其拆分为更多列等。Here is a working fiddle

如果要在内容之间使用分隔符/行，只需添加行的边框即可。这是fiddle with borders for the content

Answer 2

首先，引导网格系统的工作方式是，当您定义要标记的内容时，在窗口小于md之前，它不会折叠为垂直。尝试更改Web浏览器的大小，您会注意到它们确实是垂直堆叠的。

现在，回答你的问题。如果要垂直堆叠列，最简单的方法可能是将每组列放在自己的行中。行堆叠在每个垂直的顶部，这是你正在寻找的。

<div class="row>
...your col(s) here
</div>

Answer 3

解决它：

@media (min-width: 992px) {
    .col-md-4 {
        float: right;
    }
}

小提琴：http://jsfiddle.net/vdexv26g/2/

垂直堆栈Bootstrap网格

3 个答案: