Bootstrap菜单宽度

Question

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

例如对于767 < width of screen < 950，我遇到了问题。

这似乎是ul class="nav"中的问题，但我无法找到问题并解决问题。

＆＃13;

＆＃13;

.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;
    	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为.collapse中的问题。在屏幕中＆lt; 767.适用于低于css riles的Boostrap类collapse。

.collapse{
 display:none;
}

所以，你的UL不显示，你没有在你的HTML中使用折叠按钮。

尝试这样的事情。

＆＃13;

＆＃13;

 <!-- 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>

＆＃13;

＆＃13;

＆＃13;