Question

我在一段时间后拿起自行车，我试图创建一个简单的响应页面

但我发现当我将浏览器调整到某一点时我的中心div与上面的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%;
}
}

Answer 1

很抱歉只是注意到标题类是position：fixed 一旦我把它拿出来，现在效果更好

Bootstrap不清除中央div

1 个答案: