Bootstrap：在手机上，右侧有空白，导航栏不完整答案

【问题标题】：Bootstrap: On mobile, on the right there is white space and the nav bar is incompleteBootstrap：在手机上，右侧有空白，导航栏不完整
【发布时间】：2021-09-10 23:47:38
【问题描述】：

我有一个使用 Bootstrap 构建的网站，它在桌面上运行良好，在移动设备上处于横向模式，但在移动设备上不处于纵向模式。我的右侧有空白区域，并且导航栏的右侧缺失。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  
  <head>
    {% load static %}
         <!-- Latest compiled and minified CSS -->
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link  rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

  
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">


  </head>
  
   <body>
      <nav class="navbar navbar-expand navbar-dark bg-dark">
  
         <ul class="navbar-nav navbar-center mb-2 mb-sm-0">
             <li class="nav-item fs-3 mx-5">
                 <a class="nav-link link-color" aria-current="page" href={% url 'homepage' %}>About</a>
             </li> 

             <li class="nav-item fs-3 mx-5">
                <a class="nav-link link-color" aria-current="page" href={% url 'gallery' %}>Gallery</a>
             </li> 

             <li class="nav-item fs-3 mx-5 ">
                <a class="nav-link link-color" aria-current="page" href={% url 'guestbook' %}>Guestbook</a>
             </li>
        </ul>

  
     </nav>
     {% block content %}{% endblock %}


    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
   </body>
</html>

这是我网站上所有页面的包装器，这个问题在所有页面中都是一致的。

我的样式表是：


.img-shrink-100 {
  object-fit: contain; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
}
.img-shrink-250 {
  object-fit: contain; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 250px;
}
.img-shrink-700 {
  object-fit: contain; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 700px;
}

.p-small {
  font-size: 25px;
}

.navbar-nav.navbar-center { 
  margin: auto;
        } 

.link-color{
  color: #FFF !important;
}
.link-color:hover {
  background-color : #999999;
  color : white !important;
}
.form-center {
  text-align: center;
}
.form-oneline{
  display: inline-block;
}

有些人用overflow-x:hidden 解决了右边的白色问题，但这并没有解决我的导航栏被切断的问题（它确实阻止滚动到白色）

我不知道发生了什么，但 CSS 不是我的强项。有什么想法吗？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

所以您的代码的问题是 navbar-expand 不是要使用的，而是应该与 -lg 或 -sm 配对。

例如在你的代码中你可以这样做：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  
         <ul class="navbar-nav navbar-center mb-2 mb-sm-0">
             <li class="nav-item fs-3 mx-5">
                 <a class="nav-link link-color" aria-current="page" href={% url 'homepage' %}>About</a>
             </li> 

             <li class="nav-item fs-3 mx-5">
                <a class="nav-link link-color" aria-current="page" href={% url 'gallery' %}>Gallery</a>
             </li> 

             <li class="nav-item fs-3 mx-5 ">
                <a class="nav-link link-color" aria-current="page" href={% url 'guestbook' %}>Guestbook</a>
             </li>
        </ul>
     </nav>

此外，如果您这样做，您将获得一个响应式导航栏，但未添加 toggler/handburger menu button 和 Navbar Brand 的代码，因此您可能需要添加该代码以使菜单响应并隐藏在按钮后面。

最终的代码应该是这样的：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Navbar Brand and Toggler Button Code -->
    <div class="container-fluid">

        <!-- Navbar Brand -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Toggler Button -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar Menu -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav navbar-center mb-2 mb-sm-0">
                <li class="nav-item fs-3 mx-5">
                    <a class="nav-link link-color" aria-current="page" href={% url 'homepage' %}>About</a>
                </li>

                <li class="nav-item fs-3 mx-5">
                    <a class="nav-link link-color" aria-current="page" href={% url 'gallery' %}>Gallery</a>
                </li>

                <li class="nav-item fs-3 mx-5 ">
                    <a class="nav-link link-color" aria-current="page" href={% url 'guestbook' %}>Guestbook</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

【讨论】：

嗨！是的，这解决了它！我想知道，因为我的导航栏只有三个选项，是否有办法让它缩小而不是折叠？
如果你想缩小而不折叠，你可以尝试从 li 标签中删除 fs-3 类。如果您想使用自定义字体大小，问题在于排版对移动视图没有响应。因此，我认为您可以删除这些类或尝试使用媒体查询来根据断点调整字体大小。