Question

我试图为我的第一个响应式镜头创建一个自举网格......

我的问题是我想合并红色标记的部分 ...我该怎么做？我已经找到了一些解决方案，但这些并不是我要做的事情。

这是我的 HTML ：

<div class="container">
    <div class="row top Matches">
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row content">
        <div class="col-md-10"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
    </div>
</div>

和我的** CSS

    .top Matches {
  .make-row();
  .col-0-0 {
    .make-md-column(2);
  }
  .col-0-1 {
    .make-md-column(2);
  }
  .col-0-2 {
    .make-md-column(2);
  }
  .col-0-3 {
    .make-md-column(2);
  }
  .col-0-4 {
    .make-md-column(2);
  }
  .col-0-5 {
    .make-md-column(2);
  }
  .col-0-6 {
    .make-md-column(2);
  }
  .col-0-7 {
    .make-md-column(2);
  }
  .col-0-8 {
    .make-md-column(2);
  }
  .col-0-9 {
    .make-md-column(2);
  }
  .col-0-10 {
    .make-md-column(2);
  }
  .col-0-11 {
    .make-md-column(2);
  }
}
.content {
  .make-row();
  .col-1-0 {
    .make-md-column(10);
  }
  .col-1-1 {
    .make-md-column(2);
  }
  .col-1-2 {
    .make-md-column(2);
  }
  .col-1-3 {
    .make-md-column(8);
  }
  .col-1-4 {
    .make-md-column(2);
  }
  .col-1-5 {
    .make-md-column(2);
  }
  .col-1-6 {
    .make-md-column(8);
  }
  .col-1-7 {
    .make-md-column(2);
  }
}

由于某些原因，我的网格看起来不像我的图片，但我希望我正确地包含了bootstrap ......

这是我的第一个小提琴！

https://jsfiddle.net/L5mL0v6p/

非常感谢您的任何提示!!!

Answer 1

如果您必须加入的行始终位于开头或结尾，您可以在adiacent容器边框的方向上嵌套父行显示的行，例如：

  <div class="col-sm-12">
    full size div
  </div>
  <div class="col-sm-6">
    half
  </div>
  <div class="col-sm-6 pull-right">
    <div class="row">
      <div class="col-sm-12">
        stacked half
      </div>
      <div class="col-sm-12">
        stacked half
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    latter half
  </div>

相反，如果你想要一个确定的方法，你可以：

  <div class="col-sm-6">
    half
  </div>
  <div class="col-sm-3 ghost-col">
    <div class="row">
      <div class="col-sm-12">
        stacked fourth
      </div>
      <div class="col-sm-12">
        stacked fourth
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    latter fourth
  </div>
  <div class="col-sm-6">
    latter half
  </div>
  <div class="col-sm-3 col-sm-offset-3">
    offsetted fourth
  </div>

.ghost-col > .row { position: absolute; } 你只需要注意重叠的部分，并避免使用偏移量为absolute定位的行留出空闲空间

Bootstrap CSS：“将2列合并到一个大列”

1 个答案: