文章/答案/技术大牛

发布

社区首页 >问答首页 >启动3中的简单网格布局？

问启动3中的简单网格布局？
EN

Stack Overflow用户

提问于 2014-04-10 11:07:33

回答 1查看 552关注 0票数 0

我使用的启动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)摘录-2开始于#intro的高度，2)第1段的起始高度在#excerpt-2的结束高度之前。我如何在一个启动3网格中处理这个问题？我错过了一个明显的诡计吗？有没有一种在不改变文档来源顺序的情况下进行布局的方法？

css

twitter-bootstrap

twitter-bootstrap-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-10 11:12:53

下面的代码示例将让您开始：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22986297

复制

相似问题

问启动3中的简单网格布局？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问启动3中的简单网格布局？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问启动3中的简单网格布局？
EN