根据数量在包装器中自动空出div

Question

我有一个Bootstrap网站，它有一个div包装器，然后是1到6个可能的div。这些是200px宽，需要在内部平均间隔。

<div class="container">
  <div class="row">
    <div class="wasps_home_footer_blocks_container">
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
        <div class="wasps_home_footer_block col-md-2 ">
          <figure> <a href="#"><img src="test.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
    </div>
  </div>

CSS：

.wasps_home_footer_blocks_container {
    width: 100%;
    margin: auto;
    margin-top: auto;
    margin-top: 20px;
}
.wasps_home_footer_block {
    width: 200px;
    text-align: center;
}

这显示了四个div，但在.wasps_home_footer_blocks_container div中左对齐。 wasps_home_footer_block div需要在包含div的中间等间隔。 （见附图）

Answer 1

在这种情况下，最好使用 Flexbox 而不是Bootstrap Grid。 您可以删除已注释的代码以查看添加的其他块。

＆＃13;

＆＃13;

.wasps_home_footer_blocks_container {
  display: flex;
  width: 100%;
  margin: auto;
  margin-top: auto;
  justify-content: center;
}

.wasps_home_footer_block {
  width: 200px;
  margin: 20px;
  text-align: center;
  max-height: 100px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="wasps_home_footer_blocks_container">
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="http://www.martialartsmoviejunkie.com/wp-content/uploads/2014/08/Drunken-Master.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="https://s3.drafthouse.com/images/made/drunken-master-1_758_426_81_s_c1.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>

      <!--UNCOMMENT ME-->
      <!--       <div class="wasps_home_footer_block">
          <figure> <a href="#"><img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div>
      <div class="wasps_home_footer_block">
          <figure> <a href="#"><img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive"></a>
            <figcaption>
              <h4>Test link</h4>
            </figcaption>
          </figure>
        </div> -->
      <div class="wasps_home_footer_block">
        <figure>
          <a href="#"><img src="http://media1.break.com/dnet/media/450/925/2925450/7-martial-arts-movies-you-need-to-see-image-7.jpg" alt="" class="img-responsive"></a>
          <figcaption>
            <h4>Test link</h4>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;