Question

对于像这样的中型设备，我有3行分为4列：

<div class="container">
    <div class="row">
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
    </div>
    <div class="row">
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
    </div>
    <div class="row">
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
    </div>
</div>

如何为小型设备将这些行划分为3列，以便最终分成3行，包含3列？

Answer 1

正如我最近了解到的那样，除了其中一个div.row之外，你可以抛弃其中的一切，一切都会正常。只要你使用12的因子，就像你一样（3x4和4x3），一切都会很好地布局。

这里的工作示例：http://www.bootply.com/n0fmASOCI1

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
  </div>
</div>

Bootstrap 3混合col-md-3和col-sm-4

1 个答案: