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

Question

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

我正在使用 bootstrap 4，我试图让 bootrap 容器及其内容全宽并一直流到视口。

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

我的第二个部分解决方案基于 bootstrap 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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Zim*_*Zim 5

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>

Run Code Online (Sandbox Code Playgroud)

因此，对于您的布局..

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

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

此外，由于您仅使用 1 个网格列，因此您可以使用px-0.

要删除列（装订线）之间的间距，请参阅此问题

归档时间：	5 年，11 月前
查看次数：	1940 次
最近记录：	4 年，5 月前