使Bootstrap下拉菜單設備的整個寬度，並停止圖標移動

Question

我有一個頁面，有三列在流體容器的頂部，其次是網站的其餘部分在下面的容器中。

在流體容器中，頂部有三個部分。中間一個重定向到主頁，而我想爲左側和右側創建一個下拉菜單。我用了一個鏈接樣式的按鈕與背景圖片要做到這一點，但是，當我按下下拉按鈕，按鈕本身稍微跳起來：

還有一個下拉菜單本身的問題只擴展到左側下拉div。有沒有辦法讓它在設備的寬度上擴展？

代碼：

#header { 
 
    background-image: url(http://m.elysiumrpg.com/images/header.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    width: 100vw; 
 
    height:30.45vw; 
 
    margin-bottom:0; 
 
    margin-top:0; 
 
    position:relative; 
 
    z-index:0; 
 
} 
 

 
.topbar { 
 
    background-image: url(http://m.elysiumrpg.com/images/topbar.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    width: 100vw; 
 
    height: 10.7189vw; 
 
    max-height: 50vh; 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.topbar div { 
 
    width: 33%; 
 
    height: auto; 
 
    display: inline-block; 
 
    margin: auto; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    align-self: center; 
 
} 
 

 
.topbar div img { 
 
    height: 25%; 
 
    width: 24%; 
 
    max-height: 8.2vmax; 
 
    max-width: 8.2vmax; 
 
    display: block; 
 
    margin: auto; 
 
    padding: 0; 
 
} 
 

 
.dropup, 
 
.dropdown { 
 
    position: relative; 
 
} 
 
.dropdown-toggle:focus { 
 
    outline: 0; 
 
} 
 
.dropdown-menu { 
 
    position: relative; 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: 1000; 
 
    display: none; 
 
    float: left; 
 
    min-width: 160px; 
 
    padding: 5px 2px; 
 
    margin: 3px 3px 3px; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    list-style: none; 
 
    background-color: #232323; 
 
    -webkit-background-clip: padding-box; 
 
      background-clip: padding-box; 
 
    border: 1px solid #c1c1c1; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
} 
 
.dropdown-menu.pull-right { 
 
    right: 0; 
 
    left: auto; 
 
} 
 
.dropdown-menu .divider { 
 
    height: 1px; 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #e5e5e5; 
 
} 
 
.dropdown-menu > li > a { 
 
    display: block; 
 
    padding: 3px 20px; 
 
    clear: both; 
 
    font-weight: normal; 
 
    line-height: 1.42857143; 
 
    color: #333; 
 
    white-space: nowrap; 
 
} 
 
.dropdown-menu > li > a:hover, 
 
.dropdown-menu > li > a:focus { 
 
    color: #262626; 
 
    text-decoration: none; 
 
    background-color: #f5f5f5; 
 
} 
 

 
.btn { 
 
    display: inline-block; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
     touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 
    background-image: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.btn-link { 
 
    font-weight: normal; 
 
    color: #337ab7; 
 
    border-radius: 0; 
 
} 
 

 
.btn-block { 
 
    display: block; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<header id="header"> 
 
<div class="topbar"> 
 
<div class="dropdown"> 
 
<button class="btn btn-link dropdown-toggle btn-block" data-toggle="dropdown"><img src="http://m.elysiumrpg.com/images/notificationsnew.png" style="float:left"></button> 
 
    <ul class="dropdown-menu"> 
 
     <li>Notification 1</li> 
 
     <li>Notification 2</li> 
 
     <li>Notification 3</li> 
 
     </ul> 
 
     </div><div><a href="http://m.elysiumrpg.com/index.php"><img src="http://m.elysiumrpg.com/images/home.png"></a></div><div><img src="http://m.elysiumrpg.com/images/hamburger.png" style="float:right"></div> 
 
</div> 
 
</header>

如果它有助於在所有的網頁上線here，和我的問題可以通過點擊右側菜單漢堡上可以看到。

Answer 1

.dropdown .dropdown-menu { 
    left: auto; 
    right: 5px; 
    position: absolute; 
    width: calc(100vw - 5px); 
    margin : auto ; 
} 

添加這種風格，以避免菜單按鈕的跳躍...... 我已經參照您的現場網站寫代碼（http://m.elysiumrpg.com/index.php） 。

100vw意味着100％的視口寬度。

Answer 2

---

有關菜單全寬試試這個片斷。檢出there for more。

JS

$(document).ready(function(){ 
    $(".dropdown").on("show.bs.dropdown", function(event){ 
     $('.dropdown-menu').css("width", $('.container').width()+'px'); 
    }); 
}); 

Answer 3

下拉按鈕位於margin: auto;屬性的塊內。當下拉菜單被摺疊時，塊的上邊距等於11.359px。當下拉菜單打開時，頂部邊距變爲零。

嘗試修復margin-top屬性。例如：

.topbar div { 
    margin-top: 11px; 
}