【问题标题】:How to create these Bootstrap columns?如何创建这些 Bootstrap 列?
【发布时间】:2016-09-11 03:40:08
【问题描述】:

如何创建 Bootstrap 列,例如下面附上的照片?红线大小一样吗?

【问题讨论】:

    标签: html twitter-bootstrap-3 col


    【解决方案1】:

    阅读 BS 文档中的 Nesting columns。另请阅读Responsive column resets

    更直接地回答您的问题 - 这是您需要的:

    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          1.1
        </div>
        <div class="col-sm-4">
          1.2
        </div>
        <div class="col-sm-4">
          1.3
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-8">
          2.1
        </div>
        <div class="col-sm-4">
          <div class="row">
            <div class="col-sm-12">
              2.2T
            </div>
            <div class="col-sm-12">
              2.2B
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-4">
          3.1
        </div>
        <div class="col-sm-4">
          3.2
        </div>
        <div class="col-sm-4">
          3.3
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-4">
          <div class="row">
            <div class="col-sm-12">
              4.1T
            </div>
            <div class="col-sm-12">
              4.1T
            </div>
          </div>
        </div>
        <div class="col-sm-8">
          4.2
        </div>
      </div>
    </div>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多