1. 首頁
  2. 問答
  3. Bootstrap 3導航欄對齊問題

Bootstrap 3導航欄對齊問題

2015-10-29 98 views
0

我剛開始使用Bootstrap，我對導航欄有這個對齊問題。該鏈接移到下一行上桌面：Bootstrap 3導航欄對齊問題

enter image description here

這裏的工作演示：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. 搜索輸入的頂部有&底部的行。見下面

enter image description here

截圖有人能給我需要做來解決這些問題2什麼提示嗎？我在學習，所以我也會欣賞一個基本的解釋。謝謝！

來源

2015-10-29 Yeti

回答

3

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>

如果您在Firebug看u'd看到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>

來源

2015-10-29 11:52:15 LiranBo

+0

是的，這完全是。但我不知道你做了什麼改變：D。編輯：移動搜索的頂部/底部的線仍然存在，但。 – Yeti

+0

@Yeti，你能提供截圖嗎？ – LiranBo

+0

它在原始帖子中，在底部。 – Yeti

1

如果添加pull-left類#nav-header-search-collapse，將寬度設置爲股利。

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

來源

2015-10-29 11:53:08 Sayyid

+0

這個工程，但徽標和搜索框之間的差距翻了一番！ – Yeti

1

這個例子至少應該給你一些東西的工作。

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>

來源

2015-10-29 16:37:29 vanburen

+0

感謝這..好材料學習。 – Yeti

相關問題

 相關問題