时间戳

首页 > 解决方案 > 网站宽度总是大于页面

html - 网站宽度总是大于页面

问题描述

我最近发布了一个站点，我意识到这个站点的每个页面的大小总是比屏幕的大小更宽（即使我的屏幕分辨率是 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>

编辑

使用 row m-0，它显示为

在此处输入图像描述

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

先给class or margin: 0;，所以它不会变宽或从页面中删除水平条。rowm-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>

推荐阅读