Core 2.0 导航栏横幅覆盖移动设备上的页面内容答案

【问题标题】：Core 2.0 navbar banner covering page content on mobile deviceCore 2.0 导航栏横幅覆盖移动设备上的页面内容
【发布时间】：2019-07-25 01:10:39
【问题描述】：

我创建了一个简单的核心 2.0 Web 应用程序，但在将内容显示在移动设备上时遇到问题。

这是我垂直握住设备时网站的图像：

这是我垂直握住设备并向下滚动时的图像：

当我侧身握住设备时，也会出现以下消息：

在大多数情况下，我在 Visual Studio 2017 中创建项目后使用默认设置。这是 _Layout.cshtml 中的标记：

<div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top text-center vcenter " style="font-size:80px; font-weight:bolder;color:white;">
            The                 
        </nav>
</div>

这是包含消息的页面的标记：

<div class="row" style="width:100%;height:100%;">
    @if (!String.IsNullOrEmpty(Model.message))
    {
        <div class="row col-md-10 text-center" id="divMessage" 
          style="background-color:white;">
          @Model.message
        </div>
}
</div>

这是导航栏的 CSS：

   .navbar {
        position: fixed;
        min-height: 100px;
        margin-bottom: 20px;
        min-width: 100%;
        border: 1px solid transparent;
        color: white;
    }
@media (min-width: 768px) {
    .navbar {
        border-radius: 4px;
    }
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}

这是正文的 css：

    body {
    padding-top: 0px;
    padding-bottom: 20px;
}

.body-content {
    padding-top: 110px;
    padding-left: 15px;
    padding-right: 15px;
}

有人可以帮我在移动设备上修复网站的垂直视图，以便正文内容不会隐藏在导航栏下方吗？

【问题讨论】：

标签： c# html css asp.net-core mobile

【解决方案1】：

您使用的是固定标题，并且它的文本在移动设备上换行。因此，您应用到内容以将其推送到标题下方的正常顶部填充在移动设备上是不够的。您需要利用媒体查询断点来更改标题中的字体大小（因此它不会换行）和/或调整顶部填充以补偿换行。

.body-content {
    padding-top: 210px;
}

@media (min-width: 480px) {
    .body-content {
        padding-top: 110px;
    }
}

这可能看起来有点倒退，但您的基本样式应该是移动设备所需的，然后您从那里指定断点，一旦您达到不再包裹标题文本的宽度，就会减少填充。我刚刚加入480px，但你需要测试一下，看看你的实际宽度是多少。

【讨论】：