jquery - 我怎样才能使用 bootstrap 制作一个跨越它下面其他行的列?

标签 jquery html css twitter-bootstrap

<分区>

我有一个 3 列布局的网站,我希望中间列的高度与侧列的高度不同,然后我有第二行 2 列,我有 col-pull-left 和 col-push - 我想显示在中间大列旁边的右边,但是我总是把第二行放在我的大中间列下面。我想弄清楚如何使用 Bootstrap 来做到这一点。有什么建议吗?

我试过 float 中间列和 float 整行,我似乎无法让它工作,因为第二行总是清除第一行,所以它也清除了整个中心列。

我希望我说清楚了。基本上我的代码看起来像这样,(我删除了 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/

上一篇:jquery - div 大小的 Fancybox

下一篇:javascript - 如何将jquery省略号应用于div

相关文章:

javascript - 保留空白,忽略换行符

html - 我的媒体查询中的 CSS 代码被忽略

JavaScript div同名输入序列化为json数组

javascript - 从数组中删除项目的更好方法

javascript - 单击切换按钮时交换图像

javascript - 使用小时和分钟显示问候语(早上/下午/晚上)

javascript - Twitter Bootstrap 崩溃 : change display of toggle button

javascript - 提交功能 - 显示警告信息

JavaScript 委托(delegate)并选择 AJAX 响应

css - 为什么我的响应式 WordPress 导航的切换按钮不起作用?