Bootstrap 3導航欄對齊問題

Question

我今天才剛開始使用Bootstrap，並且在導航欄上遇到對齊問題。 鏈接移至桌面的下一行：

這是一個工作示例： http : //jsfiddle.net/b5mbbwgb

編碼：

 <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>

經過無數次嘗試，我無法解決以下問題：

1. 鏈接移至下一行
2. 搜索輸入在移動設備的頂部和底部都有行。 見下面的截圖

有人可以給我提示解決這兩個問題需要做什么嗎？ 我正在學習，所以我也很感謝基本的解釋。 謝謝！

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">

也許這樣：

選項2

<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

如果將pull-left類添加到#nav-header-search-collapse ，它將為該div設置寬度。

<div class="collapse navbar-collapse pull-left" id="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>