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类提供100％的宽度，例如：

@media (max-width: 480px) {

        .navbar-nav {

        width: 100%;
        }
}

bootsrap没有响应

1 个答案: