问引导3栅格尺寸不改变-xx
EN

Stack Overflow用户

提问于 2015-05-06 19:53:51

回答 2查看 591关注 0票数 1

伙计们，我无法使响应网格正常工作。我有几个列，我想改变屏幕大小调整。我只是在我桌面上的浏览器(safari & firefox)上测试这个。我试过的是使用col 3 col 2 col 1，不管我对浏览器大小做了什么，我都只能得到-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

}

twitter-bootstrap-3

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-05-06 20:57:04

您忽略了许多HTML属性上的引号。具体来说，类属性，因此，为什么只有第一个正在生效。好的做法是总是用引号包装你的属性。

票数 1

Stack Overflow用户

发布于 2015-05-07 15:14:09

你必须把你的风格放在你的身体里，并关闭你的括号，现在看你的代码：科德芬

<!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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30086294

复制

相似问题

问引导3栅格尺寸不改变-xx
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3栅格尺寸不改变-xxEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3栅格尺寸不改变-xx
EN