引導程序 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 全寬

Answer 2

根據引導程序 4 文檔：

需要無邊框設計？ 刪除父 .container 或 .container-fluid。

Bootstrap 4 No Gutters 文檔

所以：

    <div class="row no-gutters">
        <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>

Answer 3

這是我的解決方案：

 .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

 <div class="container"> <div class="full-width"> </div> </div>