css - 如何在 Bootstrap 4 中跨越一列两行

Question

虽然这个问题之前被问过很多次，但所有答案都建议跨越一列，将其他列放在一个内行中，如下所示:

<div class="row">
  <div class="col-12 col-md-4">logo</div>
  <div class="col-12 col-md-8">
    <div class="row">
      <div class="col-12">top nav</div>
      <div class="col-12">bottom nav</div>
    </div>
  </div>
</div>

结果在桌面上看起来像这样:

而且，在移动设备上它看起来像这样:

但是，所需的结果是将 Logo 放在两个导航之间，如下所示:

到目前为止，我最好的选择是放置两个 Logo ，然后以不同的视口(viewport)大小隐藏和显示它们。哪个有效，但并不是一个真正好的解决方案。

Answer 1

使用自定义网格布局是我的第一个建议。 (或者也许 bootstrap 有一些快捷方式，但我不知道它们)您可以使用 order-X 类的 bootstrap。但这不会帮助您在不同包装器中的 nav div 之间获得 logo div

.special {
  display: grid;
}

div {border: 1px solid grey;}

/* for tablets and desktops*/
@media screen and (min-width: 600px) {
  .special {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 50px 50px;
  }
  
  .logo {grid-area: 1/1/3/2;}

}

<div class="special">
  <div class="topNav">top nav</div>
  <div class="logo">logo</div>
  <div class="bottomNav">bottom nav</div>
</div>