Responsive navbar pulls link into the dropdown menu

问题: First of all as a disclaimer I'm a complete newbie when it comes to Bootstrap. I thought making a responsive menu would be straightforward, but I'm running into a problem w...

问题:

First of all as a disclaimer I'm a complete newbie when it comes to Bootstrap. I thought making a responsive menu would be straightforward, but I'm running into a problem where I have created a responsive navbar using bootstrap 4 which appears as follows:

enter image description here

When this is resized, it now appears as follows:

enter image description here

But when I click on the drop down menu it appears as follows:

enter image description here

I would like the button to stay in its position on the right and not be pulled into the menu. Really confused as to why this is happening. The code for this is:

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">

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

  <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>

  <div class="collapse navbar-collapse ml-auto justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </div>
  <a class="btn btn-outline-info" href="#">Button</a>

</nav>

I appreciate the help!


回答1:

Use the responsive order-* classes to make the navbar-collapse last on smaller screens..

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse ml-auto justify-content-end order-last order-lg-0" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
    </div>
    <a class="btn btn-outline-info" href="#">Button</a>
</nav>

https://www.codeply.com/go/orAvObN161


Bootstrap NavBar with left, center or right aligned items

  • 发表于 2018-07-11 23:54
  • 阅读 ( 262 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除