twitter-bootstrap-3 – Bootstrap 3 – 长右列 – 部分行

发布时间：2020-12-17 21:33:38 所属栏目：安全来源：网络整理

导读：我对Bootstrap很新,但不是12网格系统,但是我在实现比行长的列时遇到了问题. 我在网上搜索了一个公平的但是还没有找到答案！如果可能的话,我会尝试制定我想要实现的目标！第1行：[—- 12 —-] 第2行：[— 9 —] [3] 第3行：[3] [3] [3] [_] - 从上面继续列.

我对Bootstrap很新,但不是12网格系统,但是我在实现比行长的列时遇到了问题.

我在网上搜索了一个公平的但是还没有找到答案！

如果可能的话,我会尝试制定我想要实现的目标！

第1行：[—- 12 —-]

第2行：[— 9 —] [3]

第3行：[3] [3] [3] [_]< - 从上面继续列. 我遇到的困难在于以下几点：第1行,一切都好.
第2行,一切都好.
第3行,当开始第三行的第一列时,由于右栏中的内容很长,所以第三行的位置要低得多,而不是塞进去.

希望这是有道理的,并且可能有一个简单的解决方案,但是我的头现在疼,咖啡不再有效果了！

解决方法

使用嵌套来解决这个问题： http://getbootstrap.com/css/#grid-nesting

<div class="container">
  <div class="row">
    <div class="col-sm-12"></div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-12"></div>
      </div>
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

见：http://bootply.com/86710

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!