跨越 Bootstrap 列答案

【问题标题】：Spanning Bootstrap column跨越 Bootstrap 列
【发布时间】：2017-01-17 07:03:50
【问题描述】：

我需要帮助来获取下图所示的 Bootstrap 布局。我不知道如何在不影响列在移动视图上堆叠的方式（第二张图片）的情况下让黄色条显示在 Bootstrap 容器的整个宽度上。

所以我不需要在移动视图上显示黄色条，但必须保留列堆叠的顺序。我尝试在中间列中插入一个 div 并强制它超出它，但它并没有真正起作用（我得到的最接近的是负边距，但它只是与其他列重叠，我真的不知道我应该申请的确切数字每个边距使它看起来不错）。

下面是我的 HTML 结构 - 我已经删除了黄色条部分，因为我真的不知道它应该去哪里...

<div class="col-md-4">
    col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
    col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
    col 3 header<br/>col 3 contents
</div>

如果有人可以建议是否可以使用 Bootstrap 并给我一些指导，将不胜感激。

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

用于推送的引导类和用于不同设备的pull cols 会有所帮助。

只需输入xs 而不是lg 并参考以下链接。

Bootstrap 3: pull-right for col-lg only

要隐藏黄色 div，请使用 .hidden-xs

您可以在内容上使用 col-xs-pull-6 或 col-xs-pull-12。

如果您在问题中提及您的代码，我会解决的。

【讨论】：

【解决方案2】：

如果 cols 标题和黄色 div 具有固定高度，您可以在标题和内容之间设置边距，并在它们之间设置黄色 div 的绝对值

【讨论】：

【解决方案3】：

我认为最好的方法是使用 flexbox，而不是 Bootstrap。您必须重新排序所有 div 以获得所需的效果，但使用 Bootstrap 列您会发现很多问题。这是我的解决方案（调整大小以查看其工作原理）：

*{
  box-sizing: border-box;
}

.wrapper div {
  border-width: 2px;
  border-style: solid;
  padding: 5px;
}

.wrapper div:nth-child(1),
.wrapper div:nth-child(2) {
  border-color: red;
}

.wrapper div:nth-child(3),
.wrapper div:nth-child(4) {
  border-color: blue;
}

.wrapper div:nth-child(5),
.wrapper div:nth-child(6) {
  border-color: green;
}

.wrapper .yellow {
  display: none;
}

@media (min-width:768px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .wrapper div {
    flex: 1 1 33%;
  }
  .wrapper div:nth-child(1) {
    order: 1;
  }
  .wrapper div:nth-child(2) {
    order: 5;
  }
  .wrapper div:nth-child(3) {
    order: 2;
  }
  .wrapper div:nth-child(4) {
    order: 6;
  }
  .wrapper div:nth-child(5) {
    order: 3;
  }
  .wrapper div:nth-child(6) {
    order: 7;
  }
  .wrapper .yellow {
    display: block;
    border-color: yellow;
    order: 3;
    flex: 0 0 100%;
    text-align: center;
  }
}

<div class="wrapper">
  <div>col 1 header</div>
  <div>col 1 contents</div>

  <div>col 2 header</div>
  <div>col 2 contents</div>

  <div>col 3 header</div>
  <div>col 3 contents</div>

  <div class="yellow">div with full width</div>
</div>

【讨论】：