Css 推特引导网格：

我希望实现如下所示的网格：

我一直在寻找Twitter引导网格系统，但由于它面向行，我不知道如何实现这一点

---

有什么方法可以做到这一点，或者我应该坚持手动使用css吗？

您可以嵌套行和列：

<div class="row">
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-12">left top</div>
      <div class="col-md-12">left bottom</div>      
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">right top</div>
      <div class="col-md-12">right bottom</div>      
    </div>
  </div>
</div>

左上角
左下角
右上方
右下角

---

请参见“嵌套列”下的，您可以嵌套行和列：

<div class="row">
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-12">left top</div>
      <div class="col-md-12">left bottom</div>      
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">right top</div>
      <div class="col-md-12">right bottom</div>      
    </div>
  </div>
</div>

左上角
左下角
右上方
右下角

---

请参见“嵌套列”下的您仍然可以将引导网格与一些自定义样式一起使用：

.block{
边框：3px#222实心；
填充：10px；
边缘底部：10px；
}
1号楼{
高度：100px；
}
.第2区{
高度：50px；
}
.第3区{
高度：50px；
}
.第4区{
高度：100px；
}

第一区
第2区
第3区
第4区

您仍然可以将引导网格与一些自定义样式一起使用：

.block{
边框：3px#222实心；
填充：10px；
边缘底部：10px；
}
1号楼{
高度：100px；
}
.第2区{
高度：50px；
}
.第3区{
高度：50px；
}
.第4区{
高度：100px；
}

第一区
第2区
第3区
第4区

只需为子项设置2个父项宽度

列xs-*

main{padding:20px}
节，文章{显示：内联}
文章，分区{边框：4px纯黑色；页边距底部：10px}
第N条儿童（1）{身高：80px}
第N条儿童（2）{身高：40px}
分区：第n个子（1）{高度：30px}
分区：第n个子（2）{高度：90px}

---

只需为子项设置2个父项宽度

列xs-*

main{padding:20px}
节，文章{显示：内联}
文章，分区{边框：4px纯黑色；页边距底部：10px}
第N条儿童（1）{身高：80px}
第N条儿童（2）{身高：40px}
分区：第n个子（1）{高度：30px}
分区：第n个子（2）{高度：90px}

避免固定高度不是更好吗？我希望它在所有设备中都能正确缩放。我应该如何更改css代码？当然，我只是使用高度进行演示，您不必这样做，您可以删除它们并保持块的灵活性。避免固定高度不是更好吗？我希望它在所有设备中都能正确缩放。我应该如何更改css代码？当然，我只是使用了heights进行演示，您不必这样做，您可以删除它们并保持块的灵活性。为什么要使用class=“col-xs-4 col-sm-4 col-md-4 col-lg-4”？我认为您只需要使用您想要确保看起来像编码的最小的一个，所以只使用xs应该可以达到相同的效果，不是吗？为什么要使用class=“col-xs-4 col-sm-4 col-md-4 col-lg-4”？我想你只需要使用最小的一个，你想确保它看起来像编码的，所以只使用xs应该可以达到同样的效果，不是吗？我只是想问一个问题，为什么对于每一个嵌套行，你都指示col-md-12？我的意思是，根据我读到的，每一行被分成12列。在您的代码中，它总共有24列。你能告诉我吗，先生？每一行由12列组成，如果你有更多的行，那就用另一种方式来表示宽度：100%-你不需要它来达到原始问题中的布局。我只想问一个问题，为什么每一个嵌套行都用col-md-12来表示？我的意思是，根据我读到的，每一行被分成12列。在您的代码中，它总共有24列。你能告诉我吗，先生？每一行由12列组成，如果你有更多的列，那就有一个换行符，这只是说宽度的另一种方式：100%——你不需要它来实现原来问题中的布局。