Question

我今天刚刚开始使用Bootstrap，我在导航栏中遇到了这种对齐问题。链接移动到桌面上的下一行：

代码：

 <div class = "navbar navbar-inverse navbar-static-top">
           <div class = "container">
             <div class="navbar-header">
                   <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
                           <span class = "icon-bar"></span>
                           <span class = "icon-bar"></span>
                           <span class = "icon-bar"></span>
                   </button>
                   <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
                    <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
                </a>
                <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">

                   </a>

                </div>
                    <div class = "collapse navbar-collapse" id="nav-header-search-collapse">
                        <form class="nav navbar-form" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" name="q">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                </div>
                            </div>
                        </form>
                </div>

                   <div class = "collapse navbar-collapse" id="nav-header-links-collapse">
                          <ul class = "nav navbar-nav navbar-right">
                                  <li class = "active"><a href = "#">Home</a></li>
                                  <li><a href = "#">Social</a></li>
                                  <li><a href = "#">Contact</a></li>                             
                                  <li><a href = "#">About</a></li>
                          </ul>
                   </div>
           </div>
   </div>

经过多次尝试后，我无法解决这些问题：

链接移至下一行
搜索输入顶部有一行＆amp;移动底部。见下面的截图

有人可以告诉我需要做些什么来解决这两个问题吗？我正在学习，所以我也很欣赏一个基本的解释。谢谢！

Answer 1

JSFIddle

这是你的意思吗？

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <div class="navbar-header">
            <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>
            <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
                <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
                    </a>
                <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">

                </a>

                </div>
            <div class = "nav navbar-nav collapse navbar-collapse" id="nav-header-search-collapse">
                <form class="nav navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                            </div>
                        </form>
                    </div>

                <div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">Social</a></li>
                        <li><a href = "#">Contact</a></li>                             
                        <li><a href = "#">About</a></li>
                    </ul>
                </div>
            </div>
        </div>

如果你查看萤火虫，你会看到nav-header-search-collaps和nav-header-links-collapse他们的div宽度重叠。所以我改变了这一点：

<div class = "nav navbar-nav collapse navbar-collapse" id="nav-header-search-collapse">

<div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">

或许这个：

Option2

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <div class="navbar-header">
            <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>
            <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
                <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
                    </a>
                <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">

                </a>

                </div>
            <div class = "nav navbar-nav collapse navbar-collapse" id="nav-header-search-collapse">
                <form class="nav navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                            </div>
                        </form>
                    </div>

                <div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">Social</a></li>
                        <li><a href = "#">Contact</a></li>                             
                        <li><a href = "#">About</a></li>
                    </ul>
                </div>
            </div>
        </div>

Answer 2

如果您将koen@desktop:~/workspace/criteriabuilder$ ls server/build/exploded-app/WEB-INF/lib/ appengine-api-1.0-sdk-1.9.26.jar jackson-annotations-2.4.4.jar appengine-api-1.0-sdk-1.9.5.jar jackson-core-2.1.3.jar appengine-api-labs-1.9.26.jar jackson-core-2.4.4.jar appengine-api-labs.jar jackson-core-asl-1.9.11.jar appengine-endpoints-deps.jar jackson-databind-2.4.4.jar appengine-endpoints.jar jackson-dataformat-csv-2.4.4.jar appengine-jsr107cache-1.9.5.jar jackson-dataformat-smile-2.4.4.jar appengine-remote-api.jar jackson-dataformat-xml-2.4.4.jar commons-codec-1.3.jar jackson-dataformat-yaml-2.4.4.jar commons-lang3-3.1.jar jackson-mapper-asl-1.9.3.jar commons-logging-1.1.1.jar jackson-module-jaxb-annotations-2.4.4.jar google-api-client-1.16.0-rc.jar jackson-module-jsonSchema-2.4.4.jar google-api-client-1.20.0.jar jdo2-api-2.3-eb.jar google-api-client-appengine-1.16.0-rc.jar joda-time-2.3.jar google-api-client-appengine-1.20.0.jar jsr107cache-1.1.jar google-api-client-servlet-1.16.0-rc.jar jsr305-1.3.9.jar google-api-client-servlet-1.20.0.jar objectify-4.0rc1.jar google-api-services-oauth2-v2-rev69-1.16.0-rc.jar org.json.jar google-api-services-oauth2-v2-rev96-1.20.0.jar org.restlet-2.3.1.jar google-http-client-1.16.0-rc.jar org.restlet.ext.gae-2.3.1.jar google-http-client-1.20.0.jar org.restlet.ext.gae.jar google-http-client-appengine-1.16.0-rc.jar org.restlet.ext.gson-2.3.1.jar google-http-client-appengine-1.20.0.jar org.restlet.ext.gwt-2.3.1.jar google-http-client-gson-1.16.0-rc.jar org.restlet.ext.gwt.jar google-http-client-jackson-1.16.0-rc.jar org.restlet.ext.jackson-2.3.1.jar google-http-client-jackson2-1.16.0-rc.jar org.restlet.ext.jackson.jar google-http-client-jackson2-1.20.0.jar org.restlet.ext.json-2.3.1.jar google-http-client-jdo-1.20.0.jar org.restlet.ext.json.jar google-oauth-client-1.16.0-rc.jar org.restlet.ext.net.jar google-oauth-client-1.20.0.jar org.restlet.ext.servlet-2.3.1.jar google-oauth-client-appengine-1.16.0-rc.jar org.restlet.ext.servlet.jar google-oauth-client-appengine-1.20.0.jar org.restlet.jar google-oauth-client-servlet-1.16.0-rc.jar org.restlet.lib.org.json-2.0.jar google-oauth-client-servlet-1.20.0.jar servlet-api-2.5.jar gson-2.1.jar slf4j-api-1.6.1.jar gson-2.3.1.jar slf4j-jdk14-1.6.1.jar guava-14.0.1.jar snakeyaml-1.13.jar guava-14.0-rc2.jar sourcing-shared-2015-01.jar guava-jdk5-13.0.jar stax2-api-3.1.4.jar gwt-servlet-2.7.0.jar stax-api-1.0-2.jar gwt-servlet.jar transaction-api-1.1.jar hibernate-validator-4.2.0.Final.jar validation-api-1.0.0.GA.jar httpclient-4.0.1.jar woodstox-core-asl-4.3.0.jar httpcore-4.0.1.jar xpp3-1.1.4c.jar类添加到pull-left，则会为该div设置宽度。

#nav-header-search-collapse

Answer 3

这个例子至少应该为你提供一些工作。

1）就边界而言，你必须删除box-shadow和border

2）搜索栏的位置比较棘手。最好为navbar-toggle使用不同的类，这样它们就不会发生冲突，其余的只是在navbar内为它配置空间。为这样的事情创建自己的类可能更好，这样你就不会在处理预定的规则或与之斗争。

请参阅示例代码段。

.navbar.navbar-custom .navbar-brand {
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar.navbar-custom .search-toggle {
  right: 15px;
  top: 17.5px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  display: none;
}
@media screen and (min-width: 768px) {
  .navbar.navbar-custom .navbar-form {
    top: -42px;
    left: 165px;
    position: relative;
    height: 35px;
  }
}
@media screen and (max-width: 767px) {
  .navbar.navbar-custom .navbar-brand-centered {
    display: inline-block;
    left: 0;
    right: 0;
    margin: 0;
    padding-left: 0;
    float: none;
  }
  .navbar.navbar-custom .navbar-header {
    text-align: center;
  }
  .navbar.navbar-custom .search-toggle {
    display: inline;
  }
  .navbar.navbar-custom .navbar-collapse,
  .navbar.navbar-custom .navbar-form {
    border: none;
    box-shadow: none;
  }
  .navbar.navbar-custom .navbar-toggle {
    margin-right: -15px;
    left: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top navbar-custom">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle pull-left" data-toggle="collapse" data-target="#nav-bs"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand navbar-brand-centered" href="#" data-toggle="collapse" data-target="#nav-logo">
        <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
      </a>

      <a class="search-toggle pull-right glyphicon glyphicon-search" data-toggle="collapse" data-target="#nav-search"></a>

      <div class="collapse navbar-collapse" id="nav-search">
        <form class="nav navbar-form" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>

              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="nav-bs">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">Social</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li><a href="#">About</a>

        </li>
      </ul>
    </div>
  </div>
</div>

Bootstrap 3导航栏对齐问题

3 个答案: