引导程序 4 中的全宽 div

Question

为什么我在内部 div 中的底部边框不是全宽？

    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-2 bg-light mh-100">
                <div class="d-flex justify-content-center border-bottom w-100">
                    <img class="my-3" src="img/img.png" alt="" srcset="" style="height:18px; width:110px;">
                </div>
            </div>
            <div class="col-12 col-md-10 bg-dark mh-100">
                <p>sfsdfsdfsd</p>
            </div>
        </div>
    </div>

Answer 1

“为什么我的 div 内边框底部不是全宽？”

因为 Bootstrap 列有填充。使用p-0(padding:0) 将其删除。

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-2 bg-light mh-100 p-0">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/avayadak.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/SVpElPIXAw

Bootstrap 4 中的全宽边到边布局

如文档中所述，将容器流体填充（px-0）归零，并no-gutters在行上使用..

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-12">
            (edge-to-edge content)
        </div>
    </div>
</div>

使用 .row.no-gutters 时，容器流体也可以简单地移除。

Bootstrap 4 全宽