使用Twitter bootstrap实现以下布局

时间:2013-04-04 11:59:03

标签: css3 twitter-bootstrap responsive-design

我试图在twitter bootstrap(12列)的帮助下实现以下布局:

Layout

目前我有这个:

<div class="row">
    <div class="span6">1</div>
    <div class="span6">2</div>
    <div class="span6">3</div>
    <div class="span6">4</div>
    <!-- etc.. -->
</div>

我假设它会起作用,但由于某种原因它不会(所有布局都搞砸了)是否有需要应用的修复才能使其工作?或者使用bootstrap无法实现?

2 个答案:

答案 0 :(得分:2)

  <div class="row">
    <div class="span12">
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </div>
   </div>

如果你想在行之间留出空格,你可以为课程添加上边距或下边距&#34; row&#34;

答案 1 :(得分:1)

这样的事情:

<div class="row">
    <div class="span6">
        <div class="row">
            <div class="span6"></div>
        </div>
        <div class="row">
            <div class="span6"></div>
        </div>
    </div>
    <div class="span6">
        <div class="row">
            <div class="span6"></div>
        </div>
        <div class="row">
            <div class="span6"></div>
        </div>
    </div>
    <!-- etc.. -->
</div>