如何在移动视图中水平显示标题下的 Bootstrap 导航项？

Question

在桌面上，我喜欢导航栏的外观，但是当调整到移动尺寸时，它会将自己推到 size/under 垂直标题，但我希望它水平显示。

我试过显示内联，但没有用。

我知道如何使用媒体查询，但我只需要帮助在标题下显示每个导航项。

document.body.classList.add('fade');

document.addEventListener("DOMContentLoaded", function(e) {
  document.body.classList.remove('fade');
});

body {
  opacity: 1;
  transition: 0.7s opacity;
}

body.fade {
  opacity: 0;
  transition: none;
}

.header {
  padding-left: 50px;
}

#nav {
  padding-right: 50px;
}

.nav {
  transition: linear 0.4s;
}

.nav:hover {
  color: #5a5f61;
  text-decoration: underline;
}

.mt-5 {
  margin-top: 5% !important;
}

.mt-6 {
  margin-top: 2.5% !important;
}

.mt-7 {
  margin-top: 2.5% !important;
}

.bgcolor {
  background-color: lemonchiffon;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 486px) {
  .mt-5 {
    margin-top: 10% !important;
  }
  .mt-6 {
    margin-top: 2.5% !important;
  }
  .mt-7 {
    margin-top: 2.5% !important;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.jss"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Nav Bar -->
<nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav">
  <h2 class="header text-light"> Main Brand Heading </h2>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav font-weight-bold text-light" href="about.html">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav font-weight-bold text-light" href="contact.php">Contact</a>
    </li>
  </ul>
</nav>
<!-- END Nav bar -->
<div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>
<div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>
<div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Answer 1

您可以添加媒体查询以更改 flex-direction 属性，然后调整边距和填充以获得更好的结果。例如：

编辑： 我添加了另一行以强制导航元素仍在 flex-direction: row 中。

body {
    opacity: 1;
    transition: 0.7s opacity;
}

body.fade {
    opacity: 0;
    transition: none;
}

.header {
    padding-left: 50px;
}

#nav {
    padding-right: 50px;
}

.nav {
    transition: linear 0.4s;
}

.nav:hover {
    color: #5a5f61;
    text-decoration: underline;
}

.mt-5 {
    margin-top: 5% !important;
}

.mt-6 {
    margin-top: 2.5% !important;
}

.mt-7 {
    margin-top: 2.5% !important;
}

.bgcolor {
    background-color: lemonchiffon;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 486px) {
    .mt-5 {
        margin-top: 10% !important;
    }

    .mt-6 {
        margin-top: 2.5% !important;
    }

    .mt-7 {
        margin-top: 2.5% !important;
    }
}

@media only screen and (max-width : 786px) {
    #nav {
        flex-direction: column;
        justify-content: center;
        padding-right: 0px;
    }

    .header {
        padding-left: 0px;

    }

    .navbar-nav.ml-auto {
        margin-left: 0 !important;
    }

    ul {
        flex-direction: row !important;
    }
  
    ul li a  {
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }
}

 <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Main CSS -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <title>Hello, world!</title>
  </head>
  <body class="bgcolor">  
      <script>
          document.body.classList.add('fade');
        </script>
    <!-- Nav Bar -->
      <nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav">
          <h2 class="header text-light"> Main Brand Heading </h2>
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link nav font-weight-bold text-light" href="about.html">About</a>
              </li>
              <li class="nav-item">
                 <a class="nav-link nav font-weight-bold text-light" href="contact.php">Contact</a>
              </li>
            </ul>
      </nav>
      <!-- END Nav bar -->
      <div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light">
          <div class="container">
            <h1 class="display-4">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
          </div>
        </div>
      <div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light">
          <div class="container">
            <h1 class="display-4">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
          </div>
        </div>
        <div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light">
            <div class="container">
              <h1 class="display-4">Fluid jumbotron</h1>
              <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
            </div>
          </div>
        <script>
            document.addEventListener("DOMContentLoaded", function(e) {
              document.body.classList.remove('fade');
            });
          </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

如何在移动视图中水平显示标题下的 Bootstrap 导航项？

How do I display my Bootstrap nav items under my title horizontally in mobile view?

html

css

responsive-design

twitter-bootstrap

bootstrap-4