Question

我最近发布了一个站点，我意识到该站点每一页的大小总是大于屏幕的大小（即使我的屏幕分辨率为3840 * 2160！）。

我使用Boostrap 4，并且在_Layout视图中，默认情况下，我具有meta标签，该标签可让页面的尺寸适应所使用的设备：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

我没有触摸bootstrap.css文件（至少与大小无关）。

我注意到，如果在_Layout视图中删除了页面顶部（菜单）的所有内容，则页面的宽度是正确的（但这显然不是解决方案）。

因此，我每次都删除一个div类，以查看哪一个提供了问题，但没有办法，每次宽度总是大于页面时。

你有个主意吗？

<div class="bs-docs-section clearfix">
    <div class="row m-0">
        <div class="col-lg-12">
            <div class="bs-component">
                <nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
                    <div class="container p-0"> 
                        <div class="navbar-header">
                            @Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-brand" })
                        </div>
                        <div class="collapse navbar-collapse" id="navbar">
                           //code
                        </div>
                            <partial name="_LoginPartial" />
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

编辑

在第m-0行中，它显示为

Answer 1

先将margin: 0;授予row类或m-0类，这样它就不会变宽或从页面上删除水平条。

对于全角，请在您的padding: 0;类中添加类p-0或container

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="bs-docs-section">
    <div class="row m-0">
        <div class="col-lg-12 p-0">
            <div class="bs-component">
                <nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
                    <div class="container p-0"> 
                        <div class="navbar-header">
                            @Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-brand" })
                        </div>
                        <div class="collapse navbar-collapse" id="navbar">
                           //code
                        </div>
                        <partial name="_LoginPartial">
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

Answer 2

我对引导程序了解不多，但是似乎您的“行”周围需要另一个“容器” div。

<div class="container">
   <div class="row">
      [etc]
   </div>
</div>

Answer 3

Bootstrap行的默认左边距和右边距为-15px，这就是页面显示水平滚动条的原因。为了解决这个问题，我们有一个包装成行的容器，如.container或container-fluid（取决于布局）。

网站宽度始终大于页面

3 个答案: