0
をクリアしていない私は、ある時点 にブラウザのサイズを変更すると、私の中心というdivは上記のdivと重複します。ブートストラップは、私は、単純な応答ページ</p> <p>を作成しようと、 離れていくつかの時間後に、ブートストラップを拾ってるけど、私は見つけることだ中央のdiv
私は
おかげ下に HTMLを表示するためのページを嘲笑しました
などトップマージンを設定し、メディアクエリを調整しようとしました：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bwin slot game</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</head>
<body>
<div class="container-fluid">
<div class="sitebg">
<div class="row">
<div class="col-md-12 clearfix header">
<div id="tContainer"></div>
</div>
</div>
<div class="row">
<div id="game_container">
<div class="col-md-8">
<div id="sContainer" class="pull-right"></div>
</div>
<div class="col-md-4">
<div id="sContainer2"></div>
</div>
</div>
</div>
<div class=" row clearfix">
<div class="col-md-12"><div id="bContainer"></div></div>
<div class="faqs col-md-12"><div id="bContainer2"></div></div>
</div>
</div>
</div>
</body>
</html>
CSS：
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#sContainer{
width:900px; height:500px;
background-color:#ccc;
}
#sContainer2{
width:320px; height:368px;
background-color:#c88;
}
#tContainer{
width:1087px; height:49px;
background-color:#c8c;
margin:0 auto;
}
#bContainer{
width:1087px; height:93px;
background-color:#ccc;
margin:0 auto;
}
#bContainer2{
width:970px; height:329px;
background-color:#c8c;
margin:0 auto;
}
.header{
background-color: #fff;
position: fixed;
top: 0;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.footer{
position: fixed;
bottom: 0;
width: 100%
}
.faqs{
background-color:#0b1140;
}
#accepted_payments img, .faqs img{
margin: 0 auto;
}
/* width:100%
* Header
*/
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
#game_container{
width:90%;
margin:10% auto 10% auto;
}
}
/*Game*/
#game_container{
width:90%;
margin:10% auto 10% auto;
}
#game{
padding-right: 0;
padding-bottom: 100px;
}
/*
* Footer
*/
#accepted_payments {
text-align: center;
width: 100%;
background: #fff;
min-height: 38px;
margin-top: 50px;
vertical-align: top;
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
#game_container{
width:100%;
height:500px;
margin:10% auto 100px auto;
clear: both;
}
}
@media (min-width: 992px) {
#game_container{
margin:10% auto 100px auto;
width:100%;
margin:0 auto
}
}
@media (min-width: 1700px) {
#game_container{
margin:6% auto 100px auto;
width:70%;
}
#game{
padding-right: 5%;
}
}