连续12张图像，响应式，引导

在此页面上我有12张图片，迄今为止没关系。但我喜欢让他们更敏感。连续12张图像，响应式，引导

https://www.outdoorequipped.com/

我使用的代码是跟随我知道我失去了一些东西，但我不知道是什么。

另外，我该怎么办，这个DIV，在那里所有的12张图像是，有一个“自动HIGHT？

<div class="row" style="height: 60px;"> 
<div class="col-xs-6 col-sm-3"> 
<div class="featured-brands"> 
<div class="row"> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/asics.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/asics-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/puma.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/puma-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/speedo.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/speedo-logo-60.png" /> </a></div> 
</div> 
</div> 
</div> 
</div> 
<div class="col-xs-6 col-sm-3"> 
<div class="featured-brands"> 
<div class="row"> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> </a></div> 
</div> 
</div> 
</div> 
</div> 
<div class="col-xs-6 col-sm-3"> 
<div class="featured-brands"> 
<div class="row"> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/giorgo-brutini.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/giorgobrutini-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/kenneth-cole.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/kennethcole-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/dr-martens.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/drmartens-logo-60.png" /> </a></div> 
</div> 
</div> 
</div> 
</div> 
<div class="col-xs-6 col-sm-3"> 
<div class="featured-brands"> 
<div class="row"> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/caterpillar.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/caterpillar-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/sanita.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/sanita-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-4 col-xs-4"> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/wrangler.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/wrangler-logo-60.png" /> </a></div> 
</div> 
</div> 
</div> 
</div> 
</div>

来源

2015-11-16 Simon Vetterli

为什么不你尝试12 col-sm-1，它包含col-sm-12类中的图像？ –

怎么可能？你有一个例子吗？ –

试试这个！这可能会有帮助。如果您需要更多的责任，你可以。组的3个图像为一个COL-SM-4 COL-SM-4类

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <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.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <style>.imagesize {width:80px;} .element-content{text-align: center;}</style> 
</head> 
<body> 
<div class="container-fluid"> 
<div class="row" style="background-color: lightgrey"> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/asics.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/asics-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/puma.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/puma-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/speedo.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/speedo-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/giorgo-brutini.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/giorgobrutini-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/kenneth-cole.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/kennethcole-logo-60.png" /> </a></div> 
</div> 
<div class="col-sm-1 "> 
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/dr-martens.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/drmartens-logo-60.png" /> </a></div> 
</div> 
</div> 
</div> 
</body> 
</html>

来源

2015-11-16 06:52:20

下面是两个例子：实施例1开始时与6列的大屏幕，而实施例2用12列开始此。主要是通过造型实现的。

实施例1：与6列开始@大

.bg { 
 
    background: url('http://placehold.it/2350x400/f00/fff') center center no-repeat; 
 
    background-size: cover; 
 
    height: 400px; 
 
} 
 
.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.brand { 
 
    padding: 20px; 
 
    border: 1px solid rgba(0, 0, 0, 0.075); 
 
} 
 
.brand:hover { 
 
    background: rgba(0, 0, 0, 0.075); 
 
} 
 
.brand img { 
 
    height: 25px; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
footer { 
 
    height: 400px; 
 
    background: grey; 
 
} 
 
@media (max-width: 480px) { 
 
    .brand { 
 
    padding: 10px 5px; 
 
    } 
 
} 
 
@media (max-width: 360px) { 
 
    .brand img { 
 
    height: 20px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="bg"></div> 
 
<div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/active/brands/asics.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/asics-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/active/brands/puma.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/puma-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/active/brands/speedo.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/speedo-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/fashion/brands/giorgo-brutini.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/giorgobrutini-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/fashion/brands/kenneth-cole.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/kennethcole-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/fashion/brands/dr-martens.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/drmartens-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/work/brands/caterpillar.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/caterpillar-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/work/brands/sanita.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/sanita-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/work/brands/wrangler.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/wrangler-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<footer></footer>

实施例2：开始用12列@大

.bg { 
 
    background: url('http://placehold.it/2350x400/f00/fff') center center no-repeat; 
 
    background-size: cover; 
 
    height: 400px; 
 
} 
 
.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.brand { 
 
    padding: 20px 10px; 
 
    border: 1px solid rgba(0, 0, 0, 0.075); 
 
} 
 
.brand:hover { 
 
    background: rgba(0, 0, 0, 0.075); 
 
} 
 
.brand img { 
 
    height: 15px; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
footer { 
 
    height: 400px; 
 
    background: grey; 
 
} 
 
@media (max-width: 1200px) { 
 
    .brand { 
 
    padding: 20px; 
 
    } 
 
    .brand img { 
 
    height: 25px; 
 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .brand { 
 
    padding: 10px 5px; 
 
    } 
 
} 
 
@media (max-width: 360px) { 
 
    .brand img { 
 
    height: 20px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="bg"></div> 
 
<div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/active/brands/asics.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/asics-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/active/brands/puma.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/puma-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/active/brands/speedo.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/speedo-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/fashion/brands/giorgo-brutini.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/giorgobrutini-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/fashion/brands/kenneth-cole.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/kennethcole-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/fashion/brands/dr-martens.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/drmartens-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/work/brands/caterpillar.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/caterpillar-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/work/brands/sanita.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/sanita-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1"> 
 
     <div class="element-content brand"> 
 
     <a href="https://www.outdoorequipped.com/work/brands/wrangler.html"> 
 
      <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/wrangler-logo-60.png" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<footer></footer>

来源

2015-11-16 07:09:15 vanburen

连续12张图像，响应式，引导

回答

相关问题