随着浏览器变小，下拉菜单改变宽度答案

【问题标题】：Dropdown changing width as browser gets smaller随着浏览器变小，下拉菜单改变宽度
【发布时间】：2017-09-14 08:30:25
【问题描述】：

当浏览器尺寸很大时，一切似乎都可以正常工作...但是当右侧的下拉菜单打开并且用户缩小浏览器尺寸时...右侧的下拉菜单更改宽度并且用户图像从右侧浮动向左。

我试过给它一个固定的宽度......它固定了宽度但仍然向左浮动。似乎是引导程序而不是我的自定义样式

img.logo {
  margin-top: -12px;
  height: 55px;
}

.navigation .top-nav .navbar-inverse li a {
  height: 60px;
  line-height: 30px;
}

.navigation .top-nav a,
.navigation .top-nav .navbar-nav>li>a {
  color: white;
}

.navbar-inverse .navbar-nav>.user.open>a,
.navbar-inverse .navbar-nav>.user.open>a:hover,
.navbar-inverse .navbar-nav>.user.open>a:focus {
  background-color: #282c36;
}

#profile-img {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  margin-right: 10px;
  position: relative;
  bottom: 3px;
}

.user .dropdown-menu {
  background-color: #282c36;
  border: 0;
  text-align: center;
  color: white;
  min-width: 100px !important;
}

.user .dropdown-menu li {
  padding: 5px 0 5px 0;
  margin: 0 15px 0 15px;
  height: 50px !important;
  background-color: #282c36 !important;
  color: white !important;
}

.user .dropdown-menu li a {
  height: 100% !important;
  background-color: #282c36 !important;
  color: white !important;
}

.user .dropdown-menu li:hover,
.user .dropdown-menu li a:hover {
  cursor: pointer;
  background-color: #282c36 !important;
  color: white;
}

.navigation .top-nav .navbar-inverse>ul>li {
  padding-left: 8px;
}

.top-nav .navbar-collapse.collapse {
  display: block!important;
}

.top-nav .navbar-nav>li,
.navbar-nav {
  float: left !important;
}

.top-nav .navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.top-nav .navbar-right {
  position: absolute !important;
  right: 15px !important;
}

@media(max-width: 767px) {
  .navigation .top-nav .navbar-inverse {
    height: 60px;
  }
  .top-nav .navbar-right {
    float: right !important;
    position: absolute !important;
    top: -8px !important;
    right: 15px !important;
  }
  .top-nav .cart a {
    margin-top: 6px;
  }
  .top-nav .user {
    top: 5px;
  }
  .top-nav .cart {
    padding-top: -5px !important;
  }
  .top-nav .user .dropdown-menu {
    z-index: 999 !important;
    background-color: #282c36 !important;
    position: relative !important;
    top: -5px;
  }
  .top-nav .navbar-header {
    height: 60px !important;
  }
  .navigation .top-nav .navbar-inverse a {
    line-height: 30px;
  }
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="top-nav">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://freefacebookhakken.nl/img/profile-pic.png" id="profile-img"><i class="glyphicon glyphicon-chevron-down" id="profile-toggle"></i></a>
            <ul class="dropdown-menu">
              <li><a href="#">Testing </a></li>
              <li><a href="#">Contact us</a></li>
              <li><a href="#">Test</a></li>
            </ul>
          </li>
      </ul>
    </div>
  </nav>
</div>

第一个屏幕截图

第二张截图

【问题讨论】：

你能创建 sn-p 或 jsfiddle/codepen 吗？
@ovokuro 以为我已经这样做了...更新
@mplungjan 再次更新
请在此处使用 sn-p 编辑器，这样我们就不必在不需要时去 JSFiddle（由于 SO 沙箱）只需单击 <>，就像我刚刚为您所做的那样
啊哈。我是这么想的。您已将窗口的大小调整为很小的宽度，以至于它看起来像是向左浮动。那是因为您的图像和下拉菜单具有固定的宽度。

标签： html twitter-bootstrap css styles

【解决方案1】：

此 css 更新将解决您的宽度问题。

.navbar-right, .dropdown, .dropdown-menu {
  width: 130px;
}

JSFiddle Link

看起来您还有其他一些问题（导航栏边缘在较短时会变直，在较短时会出现在导航栏中，在较短时下拉线的高度会发生变化）。

【讨论】：

【解决方案2】：

Bootstrap 的导航栏类具有调整位置的媒体查询，因此它们与可切换的移动导航栏集成。但是您没有使用它，并且下拉列表所在的 navbar-right 类有一个媒体查询，可以调整最大宽度：767px 的位置，这可能会导致您看到的问题。

您将不得不在引导 css 文件中更改该媒体查询（或者添加您自己的 css 以防止这些媒体查询更改，但可能会很混乱。例如，我尝试在 jsfiddle 中添加 .user{min -width: 160px;} 部分解决了你的问题，你会明白我添加它的意思），或者使用你自己的类的下拉列表（你可以很容易地从these之一开始）。

【讨论】：

我知道它是引导媒体查询，但问题是哪一个在做
@media (max-width: 767px) .top-nav .navbar-right { float: right !important;位置：绝对！重要；顶部：-8px！重要；右：15px！重要； }

【解决方案3】：

为您的问题查找代码 sn-p。谢谢。

.top-nav {
            float: left;
            width: 100%;
            clear: both;
        }
        
        img.logo {
            margin-top: -12px;
            height: 55px;
        }
        
        .navigation .top-nav .navbar-inverse li a {
            height: 60px;
            line-height: 30px;
        }
        
        .navigation .top-nav a,
        .navigation .top-nav .navbar-nav>li>a {
            color: white;
        }
        
        .navbar-inverse .navbar-nav>.user.open>a,
        .navbar-inverse .navbar-nav>.user.open>a:hover,
        .navbar-inverse .navbar-nav>.user.open>a:focus {
            background-color: #282c36;
        }
        
        #profile-img {
            height: 40px;
            width: 40px;
            border-radius: 40px;
            margin-right: 10px;
            position: relative;
            bottom: 3px;
        }
        
        .user .dropdown-menu {
            background-color: #282c36;
            border: 0;
            text-align: center;
            color: white;
            min-width: auto !important;
        }
        
        .user .dropdown-menu li {
            padding: 5px 0 5px 0;
            margin: 0 15px 0 15px;
            height: 50px !important;
            background-color: #282c36 !important;
            color: white !important;
        }
        
        .user .dropdown-menu li a {
            height: 100% !important;
            background-color: #282c36 !important;
            color: white !important;
        }
        
        .user .dropdown-menu li:hover,
        .user .dropdown-menu li a:hover {
            cursor: pointer;
            background-color: #282c36 !important;
            color: white;
        }
        
        .navigation .top-nav .navbar-inverse>ul>li {
            padding-left: 8px;
        }
        
        .top-nav .navbar-collapse.collapse {
            display: block!important;
        }
        
        .top-nav .navbar-nav>li,
        .navbar-nav {
            float: left !important;
        }
        
        .top-nav .navbar-nav.navbar-right:last-child {
            margin-right: -15px !important;
        }
        
        .top-nav .navbar-right {
            position: absolute !important;
            right: 15px !important;
        }
        
        @media(max-width: 767px) {
            .navigation .top-nav .navbar-inverse {
                height: 60px;
            }
            .top-nav .navbar-right {
                float: right !important;
                position: absolute !important;
                top: -8px !important;
                right: 15px !important;
            }
            .top-nav .cart a {
                margin-top: 6px;
            }
            .top-nav .user {
                top: 5px;
            }
            .top-nav .cart {
                padding-top: -5px !important;
            }
            .top-nav .user .dropdown-menu {
                z-index: 999 !important;
                background-color: #282c36 !important;
                position: relative !important;
                top: 50px;
            }
            .top-nav .navbar-header {
                height: 60px !important;
            }
            .navigation .top-nav .navbar-inverse a {
                line-height: 30px;
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="top-nav">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header pull-left">
                <a class="navbar-brand" href="#">
                    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
                </a>
            </div>
            <div class="pull-right">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown user">
                        <a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><img src="http://freefacebookhakken.nl/img/profile-pic.png" id="profile-img"><i class="glyphicon glyphicon-chevron-down" id="profile-toggle"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Testing </a></li>
                            <li><a href="#">Contact us</a></li>
                            <li><a href="#">Test</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

【讨论】：