个人中心
gpt4 book ai didi

html - 使 bootstrap 4 container-fluid 完全流到浏览器窗口的边缘

转载 作者：行者123 更新时间：2023-12-04 01:00:03 25 4
gpt4 key购买 nike

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

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

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

通过这种方法，我得到了屏幕左侧的出血，但右侧仍然有 30 像素的间隙。我看不出我应该怎么做才能让全宽容器正常工作。

这是完全代表问题的代码。我想要转到屏幕边缘的内容恰好是一张 map 。我怀疑这是否相关，但以防万一:

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

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

最佳答案

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>

因此，对于您的布局..

  1. 使用 px-0
    2. 移除容器流体上的填充
  2. 使用 no-gutters 移除行上的负边距:

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

此外，由于您只使用 1 个网格列，您可以使用 px-0 简单地将其上的填充清零。

删除列之间的间距(装订线)see this question

关于html - 使 bootstrap 4 container-fluid 完全流到浏览器窗口的边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59100707/

25 4 0
文章推荐： c# - 克隆 Office Open XML 文档的最有效方法是什么？
文章推荐： intellij-idea - JetBrains IDE 中是否有等效于 vscode 的快速打开(ctrl+P)
文章推荐： typescript - 如何使用 TypeORM 在 React-Native 中处理 SQLite 迁移？
文章推荐： Python JSON序列化排除某些字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com