Question

我使用bootstrap 3.3.7获取了我的html：

<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="copyright" content=""/>
        <meta name="author" contect="Toki, 2016/12/30"/>
        <title>toki</title>     
        <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="assets/css/bootstrap-theme.min.css"" rel="stylesheet" type="text/css"/>
        <link href="assets/css/toki.css" rel="stylesheet" type="text/css"/>     

    </head>
    <body>  
        <div class='container'>
            <div class='row'>
                <img class='bg' src='assets/media/main-bg.jpg'/>
                <div class='row'>
                    <img class='logo' src='assets/media/logo.png'/>
                </div>
                <div class='row'>
                    <div class='row'>
                        <div class='main-content'>                  
                            <div class='downloadbox'>
                                <div class='downloadbtn'>
                                    <a href="#" class='iosdownload'></a>                
                                    <a href="#" class='androiddownload'></a>
                                </div>
                                <a href='#' class='call-btn'></a>
                            </div>          
                        </div>      
                    </div>      
                    <div class='row'>   
                        <div class='main-icon'>
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">

                                <ul class="nav nav-pills nav-justified">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Thông Tin game</a></li>
                                    <li data-target="#myCarousel" data-slide-to="1"><a href="#">Tính Năng</a></li>
                                    <li data-target="#myCarousel" data-slide-to="2"><a href="#">Nổi Bật</a></li>

                                </ul>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                    <img src="assets/media/ts1.jpg"/>
                                    </div><!-- End Item -->

                                    <div class="item">
                                    <img src="assets/media/ts2.jpg">          
                                    </div><!-- End Item -->

                                    <div class="item">
                                    <img src="assets/media/ts3.jpg">
                                    </div><!-- End Carousel Inner -->
                                </div><!-- End Carousel Inner -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="assets/js/jquery-1.12.4.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/toki.js"></script>
    </body>
</html>

和我的css：

img.bg{ 
    min-height: 100%;
    min-width: 1024px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    z-index:-999999;

}

.logo{  
    z-index:1;
}
.header{
    text-align: left;
    height: 59px;
    position: relative;
    z-index: 99999;
    line-height: 0;
    font-size: 12px;
    background: url(../media/menu_bg.jpg) repeat-x center center;
}

.main-header{
    position: relative;
}
.main-header > div{
    float:right;
}
.menu-cant{
    padding-right:350px;
}
.menu-game{
    padding-right:20px;
}
.dropdown-btn{
    color: #666666;
    display: block;
    width: 139px;
    height: 24px;
    line-height: 18px; 
    background: url(../media/scol.jpg) no-repeat center center;
    padding: 4px 0 0 15px;
    margin-top: 18px;
    cursor: pointer;
}
.dropdown-menu{
    margin-top:8px;
    min-width:140px;
    border-radius: 0 !important;
    line-height:11px;
}

.dropdown-menu>li>a{
    padding: 1px 12px;
}

.link-menu{
    display:inline;
    padding:20px 30px;
    font-size:12px;
}
.link-menu span {
    margin: 0 10px 0 0;
    padding: 1px 0 0 22px;
    display: inline-block;
    height: 17px;
    line-height: 18px;
    font-size:13px;
}
.fanpage-menu{
    background: url(../media/heart.jpg) no-repeat 0 center;
}
.fanpage-menu a{
    color: #666;
    text-decoration: none;
}
.user-menu{
    background: url(../media/user.jpg) no-repeat 0 center;
}

.logout-menu{
    background: url(../media/logout.jpg) no-repeat 0 center;
}

.login-menu{
    background: url(../media/login.jpg) no-repeat 0 center;
}
.new-menu{
    padding:30px 30px;
}

.new-menu ul{
    width:100px;
    list-style:none;
}

.dropdown-menu:before{
  position: absolute;
  top: -5px;
  left: 125px;
  display: inline-block;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #ccc;
  border-left: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -4px;
  left: 125px;
  display: inline-block;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #ffffff;
  border-left: 5px solid transparent;
  content: '';
}
.main-content{
    padding-top:300px;
    width:673px;
}
.downloadbox{
    background: url(../media/downloadbg2.png) 0 0 no-repeat;
    height: 200px;
    padding: 60px 0 0 8px;
    position: relative;
    left: -8px;
    width: 700px;
    margin-bottom: 9px;

}
.downloadbtn{
    width: 242px;
    margin: 10px 0 0 136px;
    float: left;
    display: inline;
}
.downloadbtn a{
    width: 242px;
    height: 55px;
    display: block;
    text-indent: -99999px;
    overflow: hidden;
}

.iosdownload{
    background: url(../media/iosbtn.png) 0 0 no-repeat;
}
.androiddownload{
    margin: 10px 0 0 0;
    background: url(../media/androidbtn.png) 0 0 no-repeat;
}
.call-btn{
    background: url(../media/monibtn_g.png) 0 0 no-repeat;
    width: 115px;
    height: 116px;
    margin: 10px 0px 0 21px;
    float: left;
    display: inline;
    text-indent: -9999px;
    overflow: hidden;
}



.phone-box{ 
    padding:3px 0 15px 238px; 
    height:70px; 
    background:url(../media/phonebg.png) 0 0 no-repeat; 
    margin-bottom:15px;
    min-width:700px;
}

.phone-box input.txt{ 
    width:300px; 
    height:40px; 
    padding: 0px 6px;
    line-height:40px; 
    border:none; 
    float:left; 
    display:inline;
    margin-top:13px;
}
.phone-box input.txt:focus{outline:none }
.phone-box input.submit{ 
    width:113px;
    height:40px; 
    border:none; 
    background:url(../media/submit.jpg) 0 0 no-repeat; 
    cursor:pointer;
    margin-top: 13px;
    margin-left: 10px;

}
.main-icon{
    width:670px;
}



#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

.carousel-inner{    
    background-color:#ffffff;
}
.carousel-inner .item img{  
    padding:10px;
}
@media (max-width: 640px) and (min-width: 320px){
  img.bg{   
    min-width: 640px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    z-index:-999999;
    background-size:contain;
  }
}

我认为我的网站是响应性的，但我的朋友并不这么认为。我做错了吗？

Answer 1

是的，你在使用Bootstrap时做错了。

行必须放在.container或.container-fluid（全宽）内，以便正确对齐和填充。

使用行创建水平的列组。

内容应放在列中，只有列可能是行的直接子项。因此，您无法排除＆＃39; row＆＃39;在里面＆＃39;行＆＃39;。你必须使用＆＃39; col-md-12＆＃39;作为一个孩子的行。获得所需的布局。

列通过填充创建装订线（列内容之间的间隙）。该填充在第一列和最后一列的行中通过.rows。

上的负余量进行偏移

检查Gridstrap Doc for Grid：http://getbootstrap.com/css/#grid-intro

Answer 2

Bootstrap使用 12列网格系统。 整个视图端口分为12个相等的列，可以单独使用，也可以在一个组中使用。它们的用法定义了您的网站对不同屏幕尺寸的行为方式。默认情况下，Bootstrap允许四种屏幕尺寸 xs，sm，md和lg。 这些屏幕具有各种像素范围。您必须根据设备屏幕规格使用列。这样做的方法是使用 预定义的类＆＃39; 。通过附加.col以及屏幕规范而不添加列，您可以定义div对该屏幕大小的行为方式。例如，.col-xs-12.col-sm-3.col-md-5.col-lg-7表示div在xs屏幕上占用12列，在sm屏幕上占3列，在md屏幕上占5列， lg屏幕上有7列。另外，如果您没有提及特定尺寸的规格，则它假设与之前的规格相同。因此，所有可以一起使用，或根据喜好使用。

通过这个来更好地理解这种网格布局：http://www.w3schools.com/bootstrap/ 阅读此处的文档： http://getbootstrap.com/getting-started/

我是否以错误的方式使我的网站响应？

2 个答案: