Question

我正在使用Bootstrap 3的网格系统（第一次）对网站进行原型设计。其中一个页面最终应如下所示：

Desired layout

我的初始标记是沿着这些方向（我已将<div>添加到组元素中，我认为我想将其转换为网格内容块。）

<body>
  <h1>Plays</h1>
  <h2>The Chair</h2>
  <div id="intro">
    <h3>Intro</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis, dolor felis eleifend diam, nec convallis orci libero eget augue. Vestibulum quis pretium tellus. Morbi nulla nulla, tempus congue viverra id, iaculis ultricies lorem.</p>
  </div>
  <div class="excerpt" id="excerpt-1">
    <h3>Excerpt 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>...</p>
  </div>
  <div class="excerpt" id="excerpt-2">
    <h3>Excerpt 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>...</p>
  </div>
</body>

我几乎是一个基于网格的设计的初学者，我对于如何使用Bootstrap的行和列标记这一点感到有点迷失。

我心中的关键事项是：1）#expote-2从与#intro相同的高度开始，2）#excerpt-1的起始高度在＃excerpt-2的结束高度之前。我如何在Bootstrap 3网格中处理这个问题？我错过了一个明显的伎俩吗有没有办法在不改变文档源顺序的情况下解决这个问题？

Answer 1

此代码示例将帮助您入门：

<div class="container">
    <div id="row-1st" class="row">
        <div class="col-xs-12">
            <h1>Header</h1>
        </div>
    </div>

    <div id="row-2nd" class="row">
        <div class="col-xs-12">
            <h1>Header Second</h1>
        </div>
    </div>

    <div id="row-3rd" class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <div class="row">
                        <div class="col-xs-12">
                            <h1>Intro</h1>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            Excerpt 1
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-xs-12">
                    Excerpt 2
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 3中的简单网格布局？

1 个答案: