gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:00:01 25 4
gpt4 key购买 nike

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

<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>

结果在桌面上看起来像这样: enter image description here

而且,在移动设备上它看起来像这样: enter image description here

但是,所需的结果是将 Logo 放在两个导航之间,如下所示: enter image description here

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

最佳答案

使用自定义网格布局是我的第一个建议。 (或者也许 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>

关于css - 如何在 Bootstrap 4 中跨越一列两行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53810967/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com