Question

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

我最初的解决方案是在屏幕一侧添加填充，以使窗口向右滚动15px。

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

通过这种方法，我可以在屏幕左侧看到出血，但右侧仍保留30px的间隙。我看不到我应该怎么做才能使全宽度容器正常工作。

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

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

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

Answer 1

使用此代码。您需要在“容器流体”类名称中再添加一个“全角”类。

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

Answer 2

因为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://www.codeply.com/p/5ihF13YSBL

此外，由于您仅使用1个网格列，因此您可以使用px-0来简单地将其填充置零。

Answer 3

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

使Bootstrap 4容器流体完全流到浏览器窗口的边缘

3 个答案: