使Bootstrap 4容器流体完全流到浏览器窗口的边缘 [英] Make a bootstrap 4 container-fluid go full bleed to edge of browser window
问题描述
我正在使用bootstrap 4，并且试图使bootrap容器及其内容全宽并一直流到视口.
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.
我最初的解决方案是在屏幕侧面添加填充，以使窗口向右滚动15px.
My initial solution added padding off the side of the screen which lead to the window scrolling right 15px.
我的第二个部分解决方案基于引导3的答案:引导容器-流体填充
My second partial solution is based on this answer for bootstrap 3: Bootstrap container-fluid padding
通过这种方法，我可以在屏幕左侧看到出血，但是右侧仍然留有30px的间隙.我看不到应该怎么做才能使全宽容器正常工作.
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?
推荐答案
Bootstrap 5 -更新2021
.no-gutters 类已替换为 .g-0 .在不需要空格的.row中使用它，并在容器上使用 .p-0 以获得边到边的宽度.
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.
引导程序4 -原始问题.
因为Bootstrap的网格行的边距为负，所以仅从容器中删除填充物是行不通的.您也不应该有嵌套的容器.
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.
要进行全宽布局(无需额外的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删除行上的负边距:
- 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
此外，由于您仅使用1个网格列，因此您可以使用 px-0 将其填充物简单地归零.
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
这篇关于使Bootstrap 4容器流体完全流到浏览器窗口的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
