css - 在移动 View 中，我在 Navbar 中的登录下拉是生涩的，看起来很奇怪

Question

我是新手，请见谅。

我正在制作一个工作站点，并使用 Bootstrap 。我在导航栏中有一个登录下拉列表。它在桌面 View 上看起来不错，但是当按比例缩小以用于移动 View 时，一旦您单击登录按钮或下拉它就会变得不稳定，然后导航栏灰色条向下延伸并且看起来完全搞砸了。帮助!

这是链接。

https://web.gettips.com/redesign7/index.html

https://web.gettips.com/redesign7/css/styles.css

下面是媒体查询的代码:

@charset "UTF-8";
/* CSS Document */

@media (max-width: 375px) {
  .title {
    padding-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  .title {
    padding-top: 0;
    font-size: 12px;
  }
  #toplogin img {
    width: 60px;
    height: auto !important;
  }
}

@media only screen and (max-width: 767px) {
  .footer-bs .footer-nav,
  .footer-bs .footer-social,
  .footer-bs .footer-ns {
    border-left: solid 1px rgba(255, 255, 255, 0.10);
  }
  #toplogin img {
    width: 90px;
    height: auto !important;
  }
}

@media only screen and (max-width: 773px) {
  .title {
    padding-top: 5px;
    font-size: 15px;
  }
  #toplogin img {
    width: 90px;
    height: auto !important;
  }
}

@media only screen and (max-width: 1029px) {
  .title {
    padding-top: 5px;
    font-size: 20px;
  }
  #toplogin img {
    width: 100px;
    height: auto !important;
  }
  .panel-heading h1 {
    font-size: 25px;
  }
}

@media (max-width: 1118px) {
  .header img {
    width: 80px;
    height: auto !important;
  }
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
    padding: 3px;
  }
  .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: 0px -15px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .navbar-text {
    float: none;
    margin: 15px 0;
  }
  /* since 3.1.0 */
  .navbar-collapse.collapse.in {
    display: block!important;
  }
  .collapsing {
    overflow: hidden!important;
  }
  .dropdown-menu {
    font-size: 16px;
  }
}

Answer 1

这是因为您在点击后添加宽度 100%... 在点击前添加到 div 宽度 100%，所以当您点击按钮时，div 已经具有正确的宽度。看，我添加了一个自定义类并定义了一个宽度。