Twitter bootstrap 连续12个图像，响应迅速，自举_Twitter Bootstrap

Twitter bootstrap 连续12个图像，响应迅速，自举

twitter-bootstrap

Twitter bootstrap 连续12个图像，响应迅速，自举,twitter-bootstrap,Twitter Bootstrap,在这一页我有12张图片，到目前为止还可以。但我喜欢让他们反应更灵敏我使用的代码是follow，我知道我遗漏了一些东西，但我不确定是什么还有，我该怎么做，这个div，所有的12张图片都在这里，有一个“自动高度” <div class="row" style="height: 60px;"> <div class="col-xs-6 col-sm-3"> <div class="featured-brands"> <div class="row

在这一页我有12张图片，到目前为止还可以。但我喜欢让他们反应更灵敏

我使用的代码是follow，我知道我遗漏了一些东西，但我不确定是什么

还有，我该怎么做，这个div，所有的12张图片都在这里，有一个“自动高度”

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

试试这个！这可能会有帮助。如果您需要更负责任的方式，您可以使用col-sm-4类将3个图像组合成一个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>


引导示例
.imagesize{width:80px；}.element内容{text align:center；}

这里有两个示例：示例1以6列的大屏幕开始，而示例2以12列开始。但这主要是通过样式实现的

示例1：以6列@大开始

.bg{
背景：url（'http://placehold.it/2350x400/f00/fff中-中不重复；
背景尺寸：封面；
高度：400px；
}
.no排水沟>[class*='col-']{
右边填充：0；
左侧填充：0；
}
.品牌{
填充：20px；
边框：1px实心rgba（0,0,0,0.075）；
}
.品牌：哈弗{
背景：rgba（0,0,0,0.075）；
}
.品牌img{
高度：25px；
显示：块；
保证金：0自动；
}
页脚{
高度：400px；
背景：灰色；
}
@介质（最大宽度：480px）{
.品牌{
填充：10px 5px；
}
}
@介质（最大宽度：360px）{
.品牌img{
高度：20px；
}
}

为什么不试试12 col-sm-1，它包含col-sm-12类中的图像？这是怎么回事？你有例子吗？