bootstrap 没有响应

Question

 .navbar {
  background-color: #808080;
 }
 .jumbotron{
 color: #ffffff;
   min-height: 580px;
   
   
 }
 .container {
  padding-right: 10px;
  padding-left: 15px;
  margin-right: AUTO;
  margin-left: auto;
}

<!DOCTYPE html>
<html lan="en">
<head>
 <title>zvoid</title>
 <meta charset="utf-8">
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <style>
 .navbar {
  background-color: #808080;
 }
 .jumbotron{
 color: #ffffff;
   min-height: 580px;
   
   
 }
 .container {
  padding-right: 10px;
  padding-left: 15px;
  margin-right: AUTO;
  margin-left: auto;
}
 
 </style>
 </head>
<body>

<nav id="myNavbar" class="navbar navbar-expand-sm navbar-dark" role="navigation">
<div class="container">
  <a class="navbar-brand" href="#"><img src="Stuff/logo here.png"></a>
<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)"></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">home</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">about</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">services</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">meni</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">usefulinfo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">contact</a>
    </li>
  </ul>

</div>
</nav>

<div class="jumbotron text-center" style="background-color:#808080; width:100%;">
<br><br><br><br><br><br>
  <h2>catering service for all occations</h2>
  <h1>just dial and book your service now!<br>
  (880)1245 657 9875
  </h1> 
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-3">
 <center>
 <img class="border border-primary rounded-circle" src="Stuff/frame.png"><br><br>
    <h3>fresh</h3>
    </center>
    </div>
     <div class="col-sm-3">
 <center>
 <img src="Stuff/frame.png"><br><br>
    <h3>delicios</h3>
    </center>
    </div>
  <div class="col-sm-3">
 <center>
 <img src="Stuff/frame.png"><br><br>
    <h3>testy</h3>
    </center>
    </div>
  <div class="col-sm-3">
 <center>
 <img src="Stuff/frame.png"><br><br>
    <h3>healthy</h3>
    </center>
    </div>
  </div>
</div>
<br><br>

  <div class="row">
    <div class="col-sm-5" ><div style="background-color:#808080; height:600px;"></div>
 </div>
 
 <div class="col-sm-7" style="padding-left:30px;"><br><br><br><br><br><br><br>
 <h1 style="color:#e6ac00;">panshi the best<br>catering service in the city</h1><br>
 <h3 >the best food make you feel good</h3>
 <p style="font-size:20px">panshi the best for elit,sed do eiusmod tempor dolor sit amet,conse ctetur adiog<BR>
 elite,sed do eiusmod tempor incididunt ut labore et lorna iquat minimam, is nostrud iono<BR>
 oris nist aliquip ex ea on the other hand,we denounce with righteous indignation and a<BR>
 ike men who are so beguild and demoralized by the charms</p><br>
 <button type="button" class="btn" style="background-color:#e6ac00;color:white;"><b>ourder now</b></button>
 </div>
  </div>
  <br><br><br><center>
 <div class="container">
 <h1 style="color:#e6ac00;">panshi the best</h1>
 </div><br>
 <div class="container">
 <button type="button" class="btn btn-round" style="color:white;background-color:#e6ac00;margin-right:25px">package</button> 
 <button type="button" class="btn btn-default btn-round">banquet</button><br><br><br>
 </div>
 <br><br>
</center>
<div class="container">
  <div class="row" >
  <div class="col-sm-8" ><br><br><br>
 <h1 style="color:#e6ac00;">panshi the best<br>catering service in the city</h1><br>
 <h3 >the best food make you feel good</h3>
 <p style="font-size:20px">panshi the best for elit,sed do eiusmod tempor dolor sit amet,conse ctetur adiog<BR>
 elite,sed do eiusmod tempor incididunt ut labore et lorna iquat minimam, is nostrud iono<BR>
 oris nist aliquip ex ea on the other hand,we denounce with righteous indignation and a<BR>
 ike men who are so beguild and demoralized by the charms</p><br>
 <button type="button" class="btn" style="background-color:#e6ac00;color:white;"><b>ourder now</b></button>
 </div>
    <div class="col-sm-4" ><img src="Stuff/image here@3x.png"  height="650">
 </div>
  </div>
 </div>
</body>
</html>

Answer 1

尝试在小型设备上将 .navbar-nav class 的宽度设置为 100%，例如：

@media (max-width: 480px) {

        .navbar-nav {

        width: 100%;
        }
}

bootstrap 没有响应

bootstrap is not responsive

html

css

twitter-bootstrap

response

jquery-mobile-navbar