使引导程序 4 容器流体完全流到浏览器窗口的边缘答案

【问题标题】：Make a bootstrap 4 container-fluid go full bleed to edge of browser window使引导程序 4 容器流体完全流到浏览器窗口的边缘
【发布时间】：2021-06-10 08:13:43
【问题描述】：

我正在使用引导程序 4，我正在尝试让引导程序容器及其内容全宽并一直流到视口。

我最初的解决方案在屏幕一侧添加了填充，导致窗口向右滚动 15 像素。

我的第二个部分解决方案基于引导程序 3 的这个答案：Bootstrap container-fluid padding

使用这种方法，我会在屏幕左侧出现出血，但右侧仍然存在 30 像素的间隙。我看不出我应该做些什么才能让全宽容器正常工作。

这是完全代表问题的代码。我想去屏幕边缘的内容恰好是一张地图。我怀疑这是否相关，但已包括在以下情况中：

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <script type="text/javascript">
        var map
        var geocoder

        function initMap() {
            // received letters array

            // create map object
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                mapTypeId: 'terrain'
            })

            var userLocation = "London"
            geocoder = new google.maps.Geocoder()
            geocoder.geocode({'address': "London"}, function(results, status) {
                if (status === 'OK') {
                    map.setCenter(results[0].geometry.location);
                } else {
                    console.log('Geocode was not successful for the following reason: ' + status)
                }
            })


            google.maps.event.addDomListener(window, 'load', initMap)
        }
        </script>

        <style>
            .container-fluid.full-width {
                padding:0px;
            }

            .change-margins {
                margin-left:-15px;
                margin-right:-15px;
            }
        </style>

    </head>
    <body style="background-color:blue;">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          nav     
        </nav>

        <div id="content" class="container-fluid full-width">

            <div id="map-panel" class="container-fluid change-margins">
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-12 m-2">
                                <h1>Title</h1>
                            </div>
                        </div>

                        <style>
                            /* Always set the map height explicitly to define the size of the div
                            * element that contains the map. */
                            #map {
                                height: 100%;
                                min-height: 300px;
                            }
                            /* Optional: Makes the sample page fill the window. */
                            html, body {
                                height: 100%;
                                margin: 0;
                                padding: 0;
                            }
                        </style>

                        <script async defer src="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"></script>

                        <div id="map">
                        </div>

                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row mt-3">
                    <div class="col-sm">
                        <h1>Content below map</h1>
                    </div>
                </div>
            </div>

        </div>
    </body>
</html>

我应该怎么做才能使内容符合浏览器窗口的边缘？

【问题讨论】：

将类名“.full-width”添加到父 div 中。例如：“容器流体全宽”

标签： html css bootstrap-4

【解决方案1】：

Bootstrap 5 - 2021 年更新

.no-gutters 类已替换为 .g-0。将它用于您不希望有间距的 .row 中，并在容器上使用 .p-0 以获得边到边的宽度。

Bootstrap 4 - 原始问题。

由于 Bootstrap 的网格行具有负边距，因此仅从容器中删除填充是行不通的。你也不应该有嵌套容器。

制作全宽布局（无需额外的 CSS）...

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

因此，对于您的布局..

使用px-0删除容器流体上的填充
使用no-gutters删除行上的负边距：

https://codeply.com/p/5ihF13YSBL

此外，由于您只使用 1 个网格列，您可以使用 px-0 简单地将其上的填充清零。

删除列之间的间距（装订线）see this question

【讨论】：

谢谢。我知道我找错树了。令人沮丧的是，这表明向右滚动 15 像素实际上是由地图本身引起的。但至少我已经成功地隔离了问题。
现在发现我的错误，只需要在嵌套行中添加 no-gutters，而不仅仅是在我的示例代码中的顶部。再次感谢！ :)

【解决方案2】：

使用此代码。您需要在“container-fluid”类名中再添加一个类“full-width”。

    <script type="text/javascript">
    var map
    var geocoder

    function initMap() {
        // received letters array

        // create map object
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            mapTypeId: 'terrain'
        })

        var userLocation = "London"
        geocoder = new google.maps.Geocoder()
        geocoder.geocode({'address': "London"}, function(results, status) {
            if (status === 'OK') {
                map.setCenter(results[0].geometry.location);
            } else {
                console.log('Geocode was not successful for the following reason: ' + status)
            }
        })


        google.maps.event.addDomListener(window, 'load', initMap)
    }
    </script>

    <style>
        .container-fluid.full-width {
            padding:0px;
        }

        .change-margins {
            margin-left:-15px;
            margin-right:-15px;
        }
    </style>

</head>
<body style="background-color:blue;">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      nav     
    </nav>

    <div id="content" class="container-fluid full-width">

        <div id="map-panel" class="container-fluid change-margins">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-12 m-2">
                            <h1>Title</h1>
                        </div>
                    </div>

                    <style>
                        /* Always set the map height explicitly to define the size of the div
                        * element that contains the map. */
                        #map {
                            height: 100%;
                            min-height: 300px;
                        }
                        /* Optional: Makes the sample page fill the window. */
                        html, body {
                            height: 100%;
                            margin: 0;
                            padding: 0;
                        }
                    </style>

                    <script async defer src="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"></script>

                    <div id="map">
                    </div>

                </div>
            </div>
        </div>

        <div class="container-fluid full-width">
            <div class="row mt-3">
                <div class="col-sm">
                    <h1>Content below map</h1>
                </div>
            </div>
        </div>

    </div>
</body>

【讨论】：

谢谢 Anish - 底部容器流体 div 上的额外全宽？奇怪的是它不适合我。我完全复制了你的身体标签，但地图右侧和浏览器窗口之间仍然有 30 像素的间隙。

【解决方案3】：

<div id="map-panel" class="container-fluid">
   <div class="row">
      <div class="col-12 p-0">
        <h1> Title </h1>
      </div>
   </div>
</div>

【讨论】：

无需做额外的事情，只需将 p-0 类赋予 col-12 即可添加填充：0!important