Question

通常，当Bootstrap导航栏折叠时，生成的菜单是屏幕的整个宽度。有没有办法让它只与屏幕的内容和右边一样宽？

Answer 1

可以通过以下方式完成 -

工作示例

 @media(max-width:767px){
              .navbar-inverse {
                width:50%;
                margin-left: 50%;
              }
            }

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
           
           </style>
           </head>
           <body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid" id="nav-container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">header</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    
    <ul class="nav navbar-nav navbar-right">
    <a href="" class="btn navbar-btn" id="signup">Sign Up</a>
      <!--<a href="" ><button class="btn navbar-btn" id="stud">Studier demo</button></a>-->
      <a href="" ><button class="btn  navbar-btn" id="help">log-in</button></a>
      <!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>-->
      <a href="" ><button class="btn  navbar-btn" id="friend">another</button></a>
    </ul>
    
    </div>
  </div>
  </nav>
  </body>
  </html>

Bootstrap 3导航栏绑定宽度

1 个答案: