使 Bootstrap 下拉菜单全宽设备并停止图标移动答案

【问题标题】：Make Bootstrap dropdown menu full width of device and stop icon from moving使 Bootstrap 下拉菜单全宽设备并停止图标移动
【发布时间】：2016-12-25 21:14:52
【问题描述】：

我在一个流体容器的顶部有一个包含三列的页面，然后是下面的容器中的网站的其余部分。

在流体容器中，顶部有三个部分。中间一个重定向到主页，而我想为左右两个创建一个下拉菜单。我使用了带有背景图片的链接样式按钮来执行此操作，但是，当我按下下拉按钮时，按钮本身会略微跳起：

还有下拉菜单本身仅延伸至左侧下拉 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，点击右侧的汉堡菜单可以看到我的问题。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

添加此样式以避免菜单按钮的跳转... 我通过引用您的 live 网站 (http://m.elysiumrpg.com/index.php) 编写了此代码。

100vw 表示 100% 的视口宽度。

【讨论】：

嗨，这非常适合宽度，但为了让两个菜单都能按我的意愿工作，我必须取出一些通用 css 并将它们专门用于该下拉菜单的内联 css..现在菜单又跳起来了。是上述组合解决了这个问题吗？

【解决方案2】：

对于全宽菜单，试试这个 sn-p。查看there for more。

JS

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

【讨论】：

【解决方案3】：

下拉按钮位于具有margin: auto; 属性的块内。当下拉列表折叠时，块的上边距等于11.359px。当下拉菜单打开时，上边距变为零。

尝试修复margin-top 属性。例如：

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

【讨论】：