-1
我一直在使用引導創建了一個示例網站，但是當我試圖重新大小的窗口或打開網站棒的移動右側現場屏幕的邊框你可以查看網站chaddi.tk如何修復引導身體
HTML這裏
<!DOCTYPE html>
<html lang="en">
<head>
<title>TITLE!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<nav id="navigation1" class="navigation">
<ul>
<li><a href="#">Home</a> <span class="glyphicon glyphicon-home" aria-hidden="true"></span></li>
<li><a href="#contact" data-toggle="modal">Contact Me</a> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></li>
<li><a href="#">About Me</a> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></li>
</ul>
</nav>
<div class="page-header">
<h1>Example page header</h1> <!--Practical name and number -->
</div>
<div class="table-responsive" id="main_table">
<table class="table table-hover">
<thead>
<tr>
<th class="text-center">No.</th>
<th class="text-center">Name</th>
<th class="text-center">Download</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td class="text-center">xxxx</td>
<td class="text-center"><a href="download/1.jpg" download="TT.png"><button type="button" class="btn btn-success">DOWNLOAD</button></a></td>
</tr>
<tr>
<td class="text-center">2</td>
<td class="text-center">yyyy</td>
<td class="text-center"><a href="download/2.jpg" download="TT.png"><button type="button" class="btn btn-success">DOWNLOAD</button></a></td>
</tr>
<tr>
<td class="text-center">3</td>
<td class="text-center">zzzzz</td>
<td class="text-center"><a href="download/3.jpg" download="TT.png"><button type="button" class="btn btn-success">DOWNLOAD</button></a></td>
</tr>
</tbody>
</table>
</div>
<!-- modal starts here -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" action="send.php">
<div class="modal-header">
<h1>Contact Me </h1>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Full name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="contact-email" placeholder="[email protected]">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-sm-2 control-label">Message:</label>
<div class="col-sm-10">
<textarea name="msg" class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a href="https://www.facebook.com/shubhamdeshmukh193" target="_blank"><img class="pull-left" src="images/fb.png" alt="Contact on Facebook" style="width:30px;height:30px;"></a>
<a type="button" class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<!-- till here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
此處的CSS
.burger {
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 4px solid currentColor;
width: 28px;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-bottom: 4px solid transparent;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked ~ .burger:before {
-ms-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:after {
-ms-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
.burger-check:checked ~ .navigation {
max-height: 500px;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
body {
background-color: #E9E9E9;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
display:center;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
a {
color: inherit;
}
small {
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
h1{
font: bold;
text-align: center;
}
.table {
padding-left: 50px;
padding-right:50px;
}
#main_table{
float: center;
width: 900px auto;
margin: 30px;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
border-left: 2px solid #808080;
border-right: 2px solid #808080;
}
.modal {
text-align: center;
font-size: 70%;
}
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
html, body {width: 100%;}
我是新來這個東西，所以如果u發現任何錯誤PLZ告訴我解決
它的工作謝謝 –