如何让 Bootstrap 列跨越多行? [英] How can I get a Bootstrap column to span multiple rows?

查看：24
本文介绍了如何让 Bootstrap 列跨越多行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试弄清楚如何使用 Bootstrap 执行以下网格.

我不确定如何创建跨越两行的框(编号 1).这些框是按照它们的布局顺序以编程方式生成的.方框 1 是一条欢迎信息.

关于最好的方法有什么想法吗?

解决方案

对于 Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><div class="row"><div class="col-md-4"><div class="well">1<br/><br/><br/><br/><br/>

<div class="col-md-8"><div class="row"><div class="col-md-6"><div class="well">2</div>

<div class="col-md-6"><div class="well">3</div>

<div class="row"><div class="col-md-6"><div class="well">4</div>

<div class="col-md-6"><div class="well">5</div>

<div class="row"><div class="col-md-4"><div class="well">6</div>

<div class="col-md-4"><div class="well">7</div>

<div class="col-md-4"><div class="well">8</div>

对于 Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="样式表"/><div class="row-fluid"><div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div><div class="span8"><div class="row-fluid"><div class="span6"><div class="well">2</div></div><div class="span6"><div class="well">3</div></div>

<div class="row-fluid"><div class="span6"><div class="well">4</div></div><div class="span6"><div class="well">5</div></div>

<div class="row-fluid"><div class="span4"><div class="well">6</div>

<div class="span4"><div class="well">7</div>

<div class="span4"><div class="well">8</div>

查看 JSFiddle (Bootstrap 2) 上的演示:http://jsfiddle.net/SxcqH/52/>

I'm trying to figure out how to do the following grid with Bootstrap.

I'm not sure how I'd create the box (number 1) that spans two rows. The boxes are generated programmatically in the order they are laid out. Box 1 is a welcome message.

Any ideas on the best way to go with this?

解决方案

For Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

For Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

See the demo on JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

这篇关于如何让 Bootstrap 列跨越多行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆