Question

<header>
<div class="navbar navbar-inverse  navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.php">
                <img style="margin-top:-15px" src="img/kiss.png"  alt=""/>
              </a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li id="index_li"><a href="index.php">Accueil</a></li>
                <li id="about_li"><a href="about.php">A propos</a></li>
                <li id="contact_li"><a href="contact.php">Contact</a></li>

                <ul class="nav navbar-nav"   >
                    <li class="divider-vertical"></li>
                    <li id="signOut_li"><a href="account.php" >Vos données</a></li>     
                    <li id="signOut_li"><a href="logOut.php" >Se déconnecter</a></li> 
                </ul> 
            <ul class="nav navbar-nav" style="float: right">
            <li><a href="#contact" class="navbar-nav pull-right">Credits</a></li>
          </ul>

            </ul>
          </div>
        </div>
</div>
</header>

我想让“Credits”漂浮在右边。

我用过：

        <ul class="nav navbar-nav" style="float: right">
        <li><a href="#contact" class="navbar-nav pull-right">Credits</a></li>
      </ul>

但没有帮助！

小提琴：http://jsfiddle.net/c8xtkz60/

Answer 1

我为你准备了一个bootply here。我建议阅读bootstrap's示例，因为使用navbar-right是您正在寻找的解决方案。您的主要问题是您开始将</ul>标签设置在彼此内部的顺序。另一个问题是你没有使用占据视口全宽的container-fluid。

<nav class="navbar navbar-inverse  navbar-static-top" role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
          <a class="navbar-brand" href="index.php">
            <img style="margin-top:-15px" src="img/kiss.png"  alt=""/>
          </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li id="index_li"><a href="index.php">Accueil</a></li>
            <li id="about_li"><a href="about.php">A propos</a></li>
            <li id="contact_li"><a href="contact.php">Contact</a></li>

            <ul class="nav navbar-nav"   >
                <li class="divider-vertical"></li>
                <li id="signOut_li"><a href="account.php" >Vos données</a></li>     
                <li id="signOut_li"><a href="logOut.php" >Se déconnecter</a></li> 
            </ul>                      
        </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#contact" >Credits</a></li>
      </ul>
      </div>
    </div>
</nav>

bootstrap：如何从导航栏中浮动一个元素？

1 个答案: