Html 使一个引导4容器的液体完全排放到浏览器窗口的边缘_Html_Css_Bootstrap 4

Html 使一个引导4容器的液体完全排放到浏览器窗口的边缘

html css bootstrap-4

Html 使一个引导4容器的液体完全排放到浏览器窗口的边缘,html,css,bootstrap-4,Html,Css,Bootstrap 4,我使用的是Bootstrap4，我试图得到一个bootrap容器和它的内容，使其达到最大宽度，并一直流到视图端口 <script type="text/javascript"> var map var geocoder function initMap() { // received letters array // create map object map = new google.maps.Ma

我使用的是Bootstrap4，我试图得到一个bootrap容器和它的内容，使其达到最大宽度，并一直流到视图端口

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

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

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

我的第二个部分解决方案基于bootstrap 3的以下答案：

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

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

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

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

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

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


变量映射
var地理编码器
函数initMap（）{
//收到的信件数组
//创建地图对象
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
mapTypeId:'地形'
})
var userLocation=“伦敦”
geocoder=new google.maps.geocoder（）
地理代码（{'address'：“London”}，函数（结果，状态）{
如果（状态=='OK'）{
map.setCenter（结果[0].geometry.location）；
}否则{
console.log（'地理代码由于以下原因未成功：'+状态）
}
})
google.maps.event.addDomListener（窗口'load'，initMap）
}
.容器-流体。全宽{
填充：0px；
}
.更改保证金{
左边距：-15px；
右边距：-15px；
}
导航
标题
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
最小高度：300px；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
地图下方的内容

为了使内容符合浏览器窗口的边缘，我应该做些什么？

使用此代码。您需要在“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>

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


变量映射
var地理编码器
函数initMap（）{
//收到的信件数组
//创建地图对象
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
mapTypeId:'地形'
})
var userLocation=“伦敦”
geocoder=new google.maps.geocoder（）
地理代码（{'address'：“London”}，函数（结果，状态）{
如果（状态=='OK'）{
map.setCenter（结果[0].geometry.location）；
}否则{
console.log（'地理代码由于以下原因未成功：'+状态）
}
})
google.maps.event.addDomListener（窗口'load'，initMap）
}
.容器-流体。全宽{
填充：0px；
}
.更改保证金{
左边距：-15px；
右边距：-15px；
}
导航
标题
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
最小高度：300px；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
地图下方的内容

引导程序5-更新2021

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

.no gutters

类已替换为

.g-0

。将其用于不需要间距的.row，并在容器上使用

.p

以获得边到边的宽度

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

引导4-原始问题

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

因为引导的网格行具有负边距，所以仅从容器中移除填充将不起作用。您也不应该有嵌套的容器

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

制作全幅面布局（无额外CSS）.

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

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


（边到边内容…）

因此，对于您的布局

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

使用

px-0

使用

无檐槽删除行上的负边距

：<