html - 下拉菜单随着浏览器变小而改变宽度

Question

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

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

JSFiddle Demo

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>

第一个屏幕截图

第二个屏幕截图

Answer 1

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

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

JSFiddle Link

看起来您还有其他一些问题(导航栏边缘变短时变直，导航栏中出现线条时变短，下拉线高度变短时)。