Question

我正在使用bootstrap框架构建导航栏。我试图将搜索字段对齐到极右，但它没有发生。任何建议将不胜感激。下面是我的代码

<h1 id="topHeader"><a href="/EduTechOnline/jsp/secure/index.jsp" id="topHeaderLink"></a></h1>
<div id="logo">
<img src="/EduTechOnline/images/logo.png" width="200" height="80" />
<div id="slogan"><h2 id="slogan">Take the world's best online courses</h2></div>
</div>

<!-- This is the header that will be present on every page -->
<nav class="navbar navbar-inverse" role="navigation">
   <div class="container-fluid">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" 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>

  <div class="collapse navbar-collapse" id="navbar-collapse-1">

  <ul class="nav navbar-nav">
  <nav id="headerli">
  <li><a class="active"href="#">Home</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Videos</a></li>
    </ul>
    <ul class="nav pull-right nav navbar-nav">

  <li> <form class="navbar-form" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn-group btn-group-sm">Go</button>
  </form>
  </li>
  </ul>
  </ul>
    </nav>
</div>
    </ul>
</nav>

Answer 1

您是否在float: right;上尝试了.navbar-form？

您也可以尝试将其从nav#headerli和孩子li中删除，然后将其放在代码段的倒数第二行。

Answer 2

有些事情是不正确的。 </div>，.navbar-header作为#nav的直接子项（无效）和错误的类ul没有关闭.navbar-right .pull-right）。与示例和文档进行比较。

DEMO：http://jsbin.com/vomera/1/edit

<nav class="navbar navbar-inverse" role="navigation">
   <div class="container-fluid">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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>
   </div>
   <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
         <li><a class="active"href="#">Home</a></li>
         <li><a href="#">Courses</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Videos</a></li>
      </ul>
      <div class="navbar-right">
         <form class="navbar-form" role="search">
            <div class="form-group">
               <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Go</button>
         </form>
      </div>
   </div>
</nav>

如何对齐导航栏中的元素？

2 个答案: