文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap:在移动设备上，右边是空白区域，导航栏不完整

问Bootstrap:在移动设备上，右边是空白区域，导航栏不完整
EN

Stack Overflow用户

提问于 2021-09-10 23:47:38

回答 1查看 78关注 0票数 0

我有一个用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

Stack Overflow用户

回答已采纳

发布于 2021-09-11 07:48:02

因此，您的代码的问题在于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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69138963

复制

相似问题

问Bootstrap:在移动设备上，右边是空白区域，导航栏不完整
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap:在移动设备上，右边是空白区域，导航栏不完整EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap:在移动设备上，右边是空白区域，导航栏不完整
EN