如何使用twitter bootstrap实现以下设计3

Question

我正在尝试设计像这样的响应式页面

使用保证金和填充我尝试以某种方式匹配设计但失败了......

这是我试过的基本示例代码......

        <div class="container" style="border:1px solid red;">

            <div class="container col-lg-6" >
                <div class="row col-lg-12" style="border:1px solid brown;">
                    section1
                </div>
                <br/>
                <div class="row col-lg-12" style="border:1px solid brown;">
                section2
                </div>


            </div>

            <div class="container col-lg-6" >

                <div class="row col-lg-12" style="border:1px solid blue;">
                section3

                </div>


            </div>              

    </div>

我需要一些帮助......谢谢..

Answer 1

你可以试试这个。

<div class="row">
<div class="col-xs-8">
    <div class="col-xs-12">
        <div class="well" style="height: 100px">
        </div>
    </div>

    <div class="col-xs-12">
        <div class="well" style="height: 40px">
        </div>
    </div>
</div>

<div class="col-xs-4">
    <div class="well" style="height: 140px">
    </div>
</div>

这只是一个演示。您可以自己添加边框，高度。

Answer 2

您需要在内部div的左侧和右侧添加一些负边距。此外，容器内的容器不是很好的做法，并且在各种浏览器大小上都会变得混乱。

http://www.bootply.com/6FWRFHv62f

CSS

.n-margin{margin-left:-30px; margin-right:-30px;}

HTML

<div class="container" style="border:1px solid red;">
    <div class="row">
      <div class="col-xs-6 n-margin">
        <div class="col-xs-12" style="border:1px solid brown;height:200px;">
          section1
        </div>
        <div class="col-xs-12" style="border:1px solid brown;height:60px">
          section2
        </div>
      </div>
      <div class="col-xs-6 n-margin pull-right">
        <div class="col-xs-12" style="border:1px solid blue;height:260px">
          section3
        </div>
    </div>              
  </div>