導航欄右側的摺疊按鈕顯示左側的鏈接

Question

因此如果我的格式非常糟糕，請首先發帖。只是關於我正在處理的自定義固定頂部導航欄的一個簡短問題（我一般對Bootstrap和CSS都很陌生）。它有一個徽標作爲品牌，右側有三個鏈接，其中一個是下拉菜單，還有一個媒體查詢鏈接可以更快崩潰（我在這裏找到了！）。但是，當窗口重新調整大小，並且點擊了摺疊按鈕時，所有鏈接都會在完整的左側下降，就像它來自品牌下方一樣。我只想要一個簡單的手風琴風格下拉式的崩潰和實際下拉。任何輸入都非常感謝！ 下面是HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><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="#"><img src="images/logo.jpg" alt="Top Tier Math"></a></div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="topFixedNavbar1"> 



    <ul class="nav navbar-nav navbar-right links"> 
     <li><a href="#">How We Work</a></li> 
     <li><a href="#">Abous Us</a></li> 

     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a> 
     <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

我還添加了一些CSS改變導航欄爲標誌的高度，但我懷疑這是原因。儘管如此。

.navbar-default{ 
height:120px; 
} 
.navbar-header, .navbar-brand{ 
height:120px; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px; 
} 

#topFixedNavbar1{ 
height:120px; 
} 

.links{ 
height:120px; 

} 

.navbar-nav li a{ 
line-height:90px; 


} 

.dropdown li a{ 
line-height:30px; 
} 
@media (max-width: 991px) { 
.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin: 7.5px -15px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.navbar-text { 
    float: none; 
    margin: 15px 0; 
} 
/* since 3.1.0 */ 
.navbar-collapse.collapse.in { 
    display: block!important; 
} 
.collapsing { 
    overflow: hidden!important; 
} 

}

Answer 1

我不知道你怎麼想他們顯示只是用CSS來控制下拉的位置。

.collapse.navbar-collapse { 
    width: 
    margin: 
} 

你應該能夠樣式添加到這一點，它會移動和改變的下拉列表。