如何在智能手机上的小屏幕或横向上垂直制作响应式导航堆栈使用 Bootstrap 4 alpha 2？

编程问答 2022-05-12

问题描述

这是我在该部分的 CSS 和 HTML：

foo = foo as string
@media (min-width:544px) {
  .navbar-toggler {
    float: right;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 25px;
    padding: 10px;
    border: none;
  }
  .nav-responsive li {
    display: block;
  }
  .nav-item {
    list-style: none;
  }
  .navbar-nav {
    display: -webkit-Box;
    display: -ms-flexBox;
    display: flex;
    -webkit-Box-orient: vertical;
    -webkit-Box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
  
  
  
}
@media (max-width: 991px) and (orientation: landscape)
{
  .navbar-expand-lg .navbar-nav {
    -webkit-Box-orient: horizontal;
    -webkit-Box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; /* This will override the flex-direction: column */
}





}

更新：此站点不允许我插入屏幕截图，而且我目前在实时站点上没有此功能。模拟器将在智能手机的横向视图中将菜单显示为垂直，但顶部链接比其他链接更向左突出。尽管在大断点中进行了覆盖，但在较大的屏幕上这种情况仍然存在。

解决方法

您可能希望将 navbar 元素的 <ul> 替换为 navbar-nav，并将 navbar-expand-lg 类添加到您的 <div>。

navbar-nav 类创建垂直堆栈，来自父元素的 navbar-expand-lg 确保它在大屏幕上水平显示。

请参阅以下代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<style>
    @media (min-width:544px) {
        .navbar-toggler {
            float: right;
            display: inline-block;
            margin-top: 5px;
            margin-bottom: 25px;
            padding: 10px;
            border: none;
        }

        .nav-responsive li {
            display: block;
        }

        .nav-item {
            list-style: none;
        }
    }

    @media screen and (orientation:landscape) {
        .navbar-nav {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column; /* This will override the flex-direction: column */
        }
    }


</style>
<body>

<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#menu">
&#9776;</button>

<div class="collapse navbar-expand-lg navbar-toggleable-sm" id="menu">
  <ul class="navbar-nav nav-responsive pull-md-right">
    <li class="nav-item"><a href="#" id="current" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="about" class="nav-link">About</a></li>
    <li class="nav-item"><a href="work" class="nav-link">Work</a></li>
    <li class="nav-item"><a href="contact" class="nav-link">Contact</a></li>
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

从显示 Bootstrap 样式的控制台：

小屏幕：

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

大屏幕：

@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; /* This will override the flex-direction: column */
}
}
django-bootstrap4htmlresponsive-design