-6
\t .navbar {
\t \t background-color: #808080;
\t }
\t .jumbotron{
\t color: #ffffff;
\t min-height: 580px;
\t
\t
\t }
\t .container {
padding-right: 10px;
padding-left: 15px;
margin-right: AUTO;
margin-left: auto;
}
\t<!DOCTYPE html>
<html lan="en">
<head>
\t <title>zvoid</title>
\t <meta charset="utf-8">
\t
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
\t <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
\t <style>
\t .navbar {
\t \t background-color: #808080;
\t }
\t .jumbotron{
\t color: #ffffff;
\t min-height: 580px;
\t
\t
\t }
\t .container {
padding-right: 10px;
padding-left: 15px;
margin-right: AUTO;
margin-left: auto;
}
\t
\t </style>
\t </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>
\t <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>
\t <li class="nav-item">
<a class="nav-link" href="javascript:void(0)">meni</a>
</li>
\t <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>
\t \t (880)1245 657 9875
</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
\t <center>
\t <img class="border border-primary rounded-circle" src="Stuff/frame.png"><br><br>
<h3>fresh</h3>
</center>
</div>
<div class="col-sm-3">
\t <center>
\t <img src="Stuff/frame.png"><br><br>
<h3>delicios</h3>
</center>
</div>
\t <div class="col-sm-3">
\t <center>
\t <img src="Stuff/frame.png"><br><br>
<h3>testy</h3>
</center>
</div>
\t <div class="col-sm-3">
\t <center>
\t <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>
\t </div>
\t
\t <div class="col-sm-7" style="padding-left:30px;"><br><br><br><br><br><br><br>
\t <h1 style="color:#e6ac00;">panshi the best<br>catering service in the city</h1><br>
\t <h3 >the best food make you feel good</h3>
\t <p style="font-size:20px">panshi the best for elit,sed do eiusmod tempor dolor sit amet,conse ctetur adiog<BR>
\t elite,sed do eiusmod tempor incididunt ut labore et lorna iquat minimam, is nostrud iono<BR>
\t oris nist aliquip ex ea on the other hand,we denounce with righteous indignation and a<BR>
\t ike men who are so beguild and demoralized by the charms</p><br>
\t <button type="button" class="btn" style="background-color:#e6ac00;color:white;"><b>ourder now</b></button>
\t </div>
</div>
<br><br><br><center>
\t <div class="container">
\t <h1 style="color:#e6ac00;">panshi the best</h1>
\t </div><br>
\t <div class="container">
\t <button type="button" class="btn btn-round" style="color:white;background-color:#e6ac00;margin-right:25px">package</button>
\t <button type="button" class="btn btn-default btn-round">banquet</button><br><br><br>
\t </div>
\t <br><br>
</center>
<div class="container">
<div class="row" >
<div class="col-sm-8" ><br><br><br>
\t <h1 style="color:#e6ac00;">panshi the best<br>catering service in the city</h1><br>
\t <h3 >the best food make you feel good</h3>
\t <p style="font-size:20px">panshi the best for elit,sed do eiusmod tempor dolor sit amet,conse ctetur adiog<BR>
\t elite,sed do eiusmod tempor incididunt ut labore et lorna iquat minimam, is nostrud iono<BR>
\t oris nist aliquip ex ea on the other hand,we denounce with righteous indignation and a<BR>
\t ike men who are so beguild and demoralized by the charms</p><br>
\t <button type="button" class="btn" style="background-color:#e6ac00;color:white;"><b>ourder now</b></button>
\t </div>
<div class="col-sm-4" ><img src="Stuff/image [email protected]" height="650">
\t </div>
</div>
\t </div>
</body>
</html>
coumputerモニタ上で動作しているようですが、モバイルビューを使用すると何かがうまくいかない。ジャンボトロンとナビゲーションバーが左に移動し、右側に空白の空白ができます。 –
'
私はcol-sm-3の