去掉bootstarp container-fluid的间距
这个问题很讨厌还不能回避,最开始我的做法是
<div class="container-fluid">
<div class="row">
<在这里写代码>
</div>
</div>
存行和列的布局是可以的但是出现nav、手风琴等布局的时候就会样式变形
于是我就深度Google下下面的方法不错,是正规的打法。
可以使用 .g-0删除预定义网格类中列之间的间隙。这将删除.row的margin和所有直接子列的水平填充。
需要边到边的设计吗? 放弃 .container or .container-fluid. 实际上,它看起来是这样的。注意:您可以继续将其用于所有其他预定义的网格类(包括列宽、响应层、重排序等)。
<header class="container-fluid bg-white row">
<div class="col-sm-1">
</div>
<div class="col-sm-10 g-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white g-0">
<div class="container-fluid g-0" >
<a href="#" class="navbar-brand g-0"><h2>亚丁号</h2></a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link active">首页</a>
<a href="#" class="nav-item nav-link">教程</a>
<a href="#" class="nav-item nav-link">题库</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">工具</a>
<a href="#" class="nav-item nav-link">登录</a>
</div>
</div>
</div>
</nav>
</div>
<div class="col-sm-1">
</div>
</header>
效果图
评论内容