bootstrap 3网格大小不改变col-xx-x

时间：2015-05-06 19:53:52

标签： twitter-bootstrap-3

伙计我无法让响应网格正常工作。我想要在屏幕大小调整时更改几列。我只是在我的桌面上的浏览器（safari和firefox）中测试它。我试过的是使用col-xs-3 col-sm-2 col-lg-1，无论我对浏览器的大小做什么，我都只得到col-xs-3。有什么想法吗？

HTML 

<!DOCTYPE html>
<html lang="en">
<head>    
  <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.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class=container-fluid>
  <h1><strong><center>Hello World!</center></strong></h1>
  <div class=row>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
  </div>
</body>
</html>

CSS 

body {
    background: url('/Users/tshon2/Desktop/rabbit.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    background-size: cover;
    color:#fff;
    background-color:#333;
    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;}

.thumbnail {
   opacity: 0.1;     
}
.thumbnail:hover {
   opacity: 0.6

}

2 个答案:

答案 0 :(得分：1)

您错过了很多HTML属性的封闭引号。具体来说，你的类属性，因此只有第一个生效。好的做法是始终将您的属性包装在引号中。

答案 1 :(得分：1)

您必须将自己的风格放在身体内并关闭支架 立即查看您的代码： Codepen 

<!DOCTYPE html>
<html lang="en">

<head>
  <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.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>

<body>
  <div class="container-fluid">
    <h1><strong><center>Hello World!</center></strong></h1>
    <div class=row>
      <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
      <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
    </div>
    
 <style>
body { background: url('/Users/tshon2/Desktop/rabbit.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color:#fff; background-color:#333; font-family: 'Open
Sans',Arial,Helvetica,Sans-Serif;} .thumbnail { opacity: 0.1; } .thumbnail:hover { opacity: 0.6 }</style
</body>

</html>

相关问题
最新问题