Make a bootstrap 4 container-fluid go full bleed to edge of browser window

问题

I'm using bootstrap 4 and I'm trying to get a bootrap container and its content to go full width and bleed all the way to the view port.

My initial solution added padding off the side of the screen which lead to the window scrolling right 15px.

My second partial solution is based on this answer for bootstrap 3: Bootstrap container-fluid padding

With this approach I get the bleed to the left of the screen, but 30px gap remains on the right. I can't see what I should have done to get the full width container working.

Here's code that fully represents the problem. The content that I want to go to the edge of screen happens to be a map. I doubt that's relevant, but have included in case:

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

What should I have done in order to get the content to meet the edge of the browser window?

回答1:

Bootstrap 5 - update 2021

The .no-gutters class has been replaced with .g-0. Use it the .row where you want no spacing, and .p-0 on the container for an edge-to-edge width.

Bootstrap 4 - original question.

Because Bootstrap's grid row has negative margins, removing padding from the the container alone won't work. You also shouldn't have nested containers.

To make a full width layout (no extra CSS)...

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

Therefore, for your layout..

remove the padding on the container-fluid using px-0
remove the negative margins on the row using no-gutters:

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

Also, since you're using only 1 grid column, you can simply zero out the padding on it using px-0.

To remove the spacing between columns (gutter) see this question

回答2:

Use this code. You need to add one more class "full-width" to the "container-fluid" class name.

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

回答3:

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

来源：https://stackoverflow.com/questions/59100707/make-a-bootstrap-4-container-fluid-go-full-bleed-to-edge-of-browser-window

标签

html

css

bootstrap-4