去掉bootstarp container-fluid的间距

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

效果图