jquery - 我如何使用 bootstrap 来创建跨越其下其他行的列？

This question already has answers here:

How can I get a Bootstrap column to span multiple rows?
                                
                                    （5个答案）
                                
                        
                                4年前关闭。
            
                    
我有一个3列布局的网站，我希望中间一列的高度与侧面一列的高度不同，然后我有第二列2列，而我的col-pull-left和col-push-right分别是我想出现在大中间列的旁边，但是我总是在大中间列的下面得到第二行。我试图弄清楚如何使用引导程序执行此操作。有什么建议么？

我试着浮动中间的列，然后浮动整个行，我似乎无法使其正常工作，因为第二行总是清除第一行，因此它也清除了整个中央列。

我希望我能说清楚。基本上我的代码看起来像这样，（即删除wp的php）

<div class="row">
        <div id="contentWrap1" class="col-sm-3">
            <h3>Acerca de CIPM</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce     eget neque gravida, faucibus lacus vel.</p>
        </div>
        <div id="contentWrap2" class="col-sm-4 col-sm-offset-1">
            //content
            //ths is the column that I want to be longer than the others because it contains many posts
        </div>
        <div id="contentWrap3" class="col-sm-3 col-sm-offset-1">
            <h3>C&oacute;digo de Etica</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
        </div>
    </div>
    //now this is the second row that is displaying beneath the first one, however high the center column is, but i would like it to display up next to the center column, with the next #contentWraps on either side. Almost as if te content had 2 sidebars on each side, except i split them up this way for the responsive layout
    <div class="row">
        <div id="contentWrap4" class="col-sm-3 pull-left" style="float:left; clear: none;">
            <h3>Quicklinks</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
        </div>
        <div id="contentWrap5" class="col-sm-3 pull-right">
            <h3>External Newsfeed</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
        </div>
    </div>

最佳答案

不要将此布局视为两行，而是将一列包含三列，并且每一列都有自己的顶部和底部。

<div class="row">
    <div id="left-col" class="col-sm-4">
        <div id="top-left"></div>
        <div id="bottom-left"></div>
    </div>
    <div id="middle-col" class="col-sm-4">
        <div></div>
    </div>
    <div id="right-col" class="col-sm-4">
        <div id="top-right"></div>
        <div id="bottom-right"></div>
    </div>
</div>

关于jquery - 我如何使用 bootstrap 来创建跨越其下其他行的列？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31295083/