Bootstrap 4 Navbar右对齐-Java 学习之路

我正在使用Bootstrap 4网站上的导航栏模板，但我对崩溃导航项目的位置有疑问 . 最初，切换按钮位于导航栏的左侧以及列表项 .

但是我希望它们位于页面的右侧，所以我在按钮和导航项上插入了一个float-xs-right类 . 然后，如果单击切换按钮，折叠项目将无法正确定位 . 正如您在屏幕截图中看到的那样 .

我希望折叠项目位于左下方和左侧 .

顺便说一下，这是我的代码：

<nav class="navbar navbar-light bg-faded">
 <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
 <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>

 <div class="collapse navbar-toggleable-md" id="main-navbar">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Bio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Awards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">More info</a>
    </li>
  </ul>
 </div>
</nav>

此外，这是我的导航栏的codepen：

http://codepen.io/marcvs/pen/PGvqBO

先感谢您 .

2 回答

For Bootstrap 4 Alpha 6 / Beta: Bootstrap 4 align navbar item to the right

这是正确的方法 . 您希望默认情况下将菜单浮动 . 将按钮向右浮动（ float-xs-right ），但不能看到它（ hidden-lg-up ），然后 float-lg-right ul ，它可以像你想要的那样工作 .

看到这个codepen：

http://codepen.io/anon/pen/mAYAKd?editors=1100

它工作正常 .

注意这个添加的CSS：

@media screen and (max-width: 992px){
  #main-navbar {
      clear: both;
  }
}

HTML：

<nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>

    <div class="collapse navbar-toggleable-md" id="main-navbar">
      <ul class="nav navbar-nav float-lg-right">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Details</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Awards</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">More info</a>
        </li>
      </ul>
    </div>
  </nav>

回复于 2024-05-08T04:20:01+08:00

您好请参见下面的示例 . 尽管我以另一种方式做到了，但希望您正在寻找这个 .

<nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data- 
   target="#navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   &nbsp;   
    </div>
   <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
   <div class="collapse navbar-collapse" id="navbar-collapse-1">     
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Bio</a></li>
    <li><a href="#">Details</a></li>
     <li><a href="#">Award</a></li>
    <li><a href="#">More info</a></li>

    </ul>
   </div>
   </nav>

看小提琴NavBar Fiddle Demo

希望能帮助到你 .

回复于 2024-05-08T04:20:01+08:00

Bootstrap 4 Navbar右对齐

2 回答

相关问题