Bootstrap Horizo​​ntal Navbar Toggle

Question

我准备了带有BS 4文档的简单导航栏菜单。单击时，切换菜单显示垂直。是否可以与BS建立水平？

这是我的导航栏和codepen.io：vertical toggle

＆＃13;

＆＃13;

body {
  margin: 0 auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="nav-brand" href="#">
    <img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
    <span class="navbar-toggler-icon"</span>
  </button>
  <div class="collapse navbar-collapse" id="mainNav">
    <div class="navbar-nav ml-auto">
        <a class="nav-item nav-link active" href="#">ABOUT<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link " href="#">PORTFOLIO</a>
        <a class="nav-item nav-link " href="#">CONTACT</a>
    </div>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

这是我想要的，但我无法弄清楚源代码：horizontal toggle

Answer 1

这样做相当简单。 Bootstrap有flex个类选项，因此无需创建自己的代码。

简单地改变：

<div class="navbar-nav ml-auto">

要：

<div class="navbar-nav flex-row ml-md-auto d-md-flex">

另外，请确保将p-2添加到nav-item，这会在元素之间留出一些填充空间。

这使您的代码看起来像这样：

＆＃13;

＆＃13;

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
    <img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
    <span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
    <div class="navbar-nav flex-row ml-md-auto d-md-flex">
        <a class="nav-item nav-link p-2 active" href="#">ABOUT<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link p-2" href="#">PORTFOLIO</a>
        <a class="nav-item nav-link p-2" href="#">CONTACT</a>
    </div>
</div>
</nav>

＆＃13;

＆＃13;

＆＃13;