Bootstrap 3中的簡單網格布局？

Question

我正在使用Bootstrap 3的網格系統（第一次）來創建一個站點原型。 其中一個頁面最終應如下所示：

期望的布局

我的初始標記是沿着這些行（我已經將<div> s添加到我認為我想要變成網格內容塊的組元素中。）

<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）#expcer-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 個解決方案

解決方案1
2 已采納 2014-04-10 11:12:53

Bootstrap 3中的簡單網格布局？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-04-10 11:12:53

解決方案1
2 已采納 2014-04-10 11:12:53