尽管这个问题已经被问过很多次了,但所有答案都建议跨一列,将其他列放入内部行,如下所示:
<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>
到目前为止,我最好的选择是在两个位置放置两个徽标,然后隐藏并以不同的视口尺寸显示它们。哪个可行,但并不是真正的解决方案。
答案 0 :(得分:1)
使用自定义网格布局是我的第一个建议。 (或者引导程序有一些捷径,但是我不知道它们)您可以使用order-X
类引导程序。但这并不能帮助您在不同包装中的 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>