Question

在这个页面上，我有12张图片，到目前为止还可以。但我喜欢让他们更敏感。

https://www.outdoorequipped.com/

我使用的代码是关注的，我知道我错过了什么，但我不确定是什么。

另外，我怎么做，这个12个图像所在的div有一个＆＃34;自动高度？

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

Answer 1

试试这个！这可能有所帮助。如果您需要更多责任，可以使用col-sm-4类将3张图像分组为一个col-sm-4。

> db.sample.insert({account: 'abc', account_type: 'individual', properties: 
     {title: 'mr', gender: 'M', dob: '19850101' }});
> db.sample.insert({account: 'xyz', account_type: 'individual', properties: 
     {title: 'ms', gender: 'F' }}); 
> db.sample.insert({account:'lmn', account_type: 'business', properties: 
     {title: 'messrs', industry: 'telecom', estd_on: '19850301' }});

Answer 2

以下是两个示例：示例1从具有6列的大屏幕开始，而示例2以12列开始。这主要是通过造型实现的。

示例1 ：从@ large的6列开始

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

示例2 ：从12列@ large

开始

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

12个图像连续，响应，引导

2 个答案: