如何创建跨多行的引导列？-css教程-PHP中文网

首页

web前端

css教程

如何创建跨多行的引导列？

Susan Sarandon

Dec 14, 2024 pm 03:10 PM

How to Create a Bootstrap Column Spanning Multiple Rows?

创建跨多行的 Bootstrap 列

您的目标是构建具有特定布局的 Bootstrap 网格：

如何创建跨多行的引导列？

挑战在于创建跨越两行的框 1。

对于 Bootstrap 3：

要在 Bootstrap 3 中实现此目的，请利用以下 HTML 结构：

<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>

登录后复制

以上是如何创建跨多行的引导列？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn