如何在 Bootstrap 4 中跨列两行
How to span a column two rows in Bootstrap 4
虽然这个问题以前问过很多,但所有答案都建议跨越一列,将其他列放在一个内行中,就像这样:
<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>
结果在桌面上看起来像这样:
而且,在移动设备上它看起来像这样:
然而,所需的结果是将徽标放在两个导航之间,如下所示:
到目前为止,我最好的选择是放置两个徽标,然后以不同的视口大小隐藏和显示它们。哪个有效,但并不是一个很好的解决方案。
使用自定义网格布局是我的第一个建议。 (或者 bootstrap 可能有一些捷径,但我不知道)你可以玩 bootstrap 的 order-X
类。但这不会帮助你在 nav divs 之间获得 logo div,在不同的 wrapper[=13] =]
.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>
虽然这个问题以前问过很多,但所有答案都建议跨越一列,将其他列放在一个内行中,就像这样:
<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>
结果在桌面上看起来像这样:
而且,在移动设备上它看起来像这样:
然而,所需的结果是将徽标放在两个导航之间,如下所示:
到目前为止,我最好的选择是放置两个徽标,然后以不同的视口大小隐藏和显示它们。哪个有效,但并不是一个很好的解决方案。
使用自定义网格布局是我的第一个建议。 (或者 bootstrap 可能有一些捷径,但我不知道)你可以玩 bootstrap 的 order-X
类。但这不会帮助你在 nav divs 之间获得 logo div,在不同的 wrapper[=13] =]
.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>