Bootstrap 菜单宽度

Question

我有一个 Bootstrap 菜单，但是当我想更改屏幕宽度时遇到问题。

例如 767 < width of screen < 950，我有一个问题。

好像是ul class="nav"中的问题，但是我找不到问题并解决。

.static-navbar {
        float: right;
    }
    
    @media (min-width: 768px){
     .navbar-collapse.collapse {
      display: block!important;
      height: auto!important;
      padding-bottom: 0;
      overflow: visible!important;
     }
    }
    
    @media (min-width: 768px){
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block!important;
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
    }
    }
    
    .navbar-nav li.drop {
        position: relative;
    }
    
    @media (min-width: 768px){
    .navbar-nav>li {
        float: left;
    }
    }
    
    .nav>li {
        position: relative;
        display: block;
    }
    
    .navbar-nav > li > a {
         padding: 40px 15px 38px;
    }
    
    .navbar-nav li.drop ul.dropdown {
        margin: 0;
        padding: 10px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 250px;
     }

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <div class="navbar-header">
          Logo
        </div>
      </div>
      <div class="col-sm-10 static-navbar">
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="drop">
              <a class="active" href="index.html">Home</a>
              <ul class="dropdown">
                <li>
                  <a href="index.html">Lorem Ipsum</a>
                </li>
              </ul>
            </li>
            <li class="drop">
              <a class="active" href="index.html">Home</a>
              <ul class="dropdown">
                <li>
                  <a href="index.html">Lorem Ipsum</a>
                </li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </div>
  </div><!-- /.container -->
</nav>

Answer 1

我认为 .collapse 中存在问题。在屏幕 < 767 中。Boostrap class collapse below css 规则适用。

.collapse{
 display:none;
}

因此，您的 UL 未显示并且您没有在 html 中使用折叠按钮。

尝试这样的事情。

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <!-- Latest compiled JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                <div class="navbar-header">
                    Logo
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                </div>
            </div>
            <div class="col-sm-10 static-navbar">
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="drop"><a class="active" href="index.html">Home</a>
                            <ul class="dropdown">
                                <li><a href="index.html">Lorem Ipsum</a></li>
                            </ul>   
                        </li>
                        <li class="drop"><a class="active" href="index.html">Home</a>
                            <ul class="dropdown">
                                <li><a href="index.html">Lorem Ipsum</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </div>
    </div><!-- /.container -->
</nav>

Bootstrap 菜单宽度

Bootstrap menu width

html

css

menu

nav

twitter-bootstrap