在 Bootstrap 流体宽度中居中然后左对齐图像网格

Question

我正在使用具有以下要求的 Bootstrap 3.0：

1. 每个缩略图图像都有固定的已知宽度，在这种情况下假设为 200 像素。 可以有多列（如果屏幕很大，根据需要可以有5-6列）。
2. 整个页面必须是流体宽度
3. 容器（在本例中为.center）必须位于页面的中心
4. 然后在容器内（本例中为.grid），缩略图本身必须左对齐。例如，如果页面每行适合 3 张图片，但最后一行只有 2 张图片，则这 2 张图片必须左对齐。
5. 我可以更改 HTML 结构但没有 JS。页面和整个容器的宽度未知。

示例 1：本例中的列数为 4。图片（蓝色）在页面中心的灰色容器（黄色）内左对齐。

示例 2：当屏幕宽度较小时，图像会向下折叠（因此本例中为 3 列）。但是图像容器仍然居中，所有图像都左对齐。

我当前的代码只左对齐，但.center 类实际上没有任何效果。不知何故，我需要 .center 类（红色边框）具有内部图像的宽度（不是全宽），然后将其自身居中。

HTML：

<div class='col-md-12'>
  <div class='center'>
    <div class='grid'>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
      <div class='thumbnail'>
        <img src='http://placehold.it/200x200' />
        <div class='caption'>
          <h3>Donec id elit non mi porta gravida at eget metus</h3>
          <p>Fusce dapibus tellus ac cursus commodo</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.col-md-12 {
    background: yellow;
}

.center {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
}

.grid {
    text-align: left;
}

.thumbnail {
    display: inline-block;
    width: 215px;
    max-width: none;
}

链接： http://jsfiddle.net/qhoc/Rp838/

有什么帮助吗？

更新 1：

按照 Matt 的建议“将整个东西包装在一个 .container 中”。仍然没有工作，因为您看到红色边框不是页面中心。

http://jsfiddle.net/qhoc/Rp838/1/

Answer 1

在经历了一上午的事情后终于解决了。 这是它的jsfiddle。

http://jsfiddle.net/Rp838/9/

                    .menu {
              display: block;
              height: 100%;
              max-width: 1000px;
              margin-left: auto;
              margin-right: auto;
              text-align: center;
              /*flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;*/
            }

            .menuItem {
              display: inline-block;
              position: relative;
              margin: 0 5px 20px 5px;
              max-width: 320px;
            }

            .menuItem img {
              max-width: 100%;
            }

            .menuItem h2 {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              margin: 0;
              text-align: center;
              color: white;
              font: bold 1.5em/2em Helvetica, Sans-Serif;
              background: rgb(0, 0, 0);
              /* fallback color */

              background: rgba(0, 0, 0, 0.7);
            }

            .menuItem h3 {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              margin: 0;
              text-align: center;
              color: white;
              font: bold 1em/1.5em Helvetica, Sans-Serif;
              background: rgb(0, 0, 0);
              /* fallback color */

              background: rgba(0, 0, 0, 0.7);
            }

            .menu li {
              list-style: none;
            }

            .menu a {
              font-weight: normal;
              text-decoration: none;
            }

            .menu a:hover {
              text-decoration: underline;
            }

            .menu a:active {
              text-decoration: underline;
            }






                <div class="menu">
                <div class="menuItem">
                  <a href="history.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="History" />
                    <h2>History</h2>
                  </a>
                </div>
                <div class="menuItem">
                  <a href="photographs.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Photographs" />
                    <h2>Photographs</h2>
                  </a>
                </div>
                <div class="menuItem">
                  <a href="videos.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Videos" />
                    <h2>Videos</h2>
                  </a>
                </div>
                <div class="menuItem">
                  <a href="documents.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Documents" />
                    <h2>Documents</h2>
                  </a>
                </div>
                <div class="menuItem">
                  <a href="maps.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Maps" />
                    <h2>Maps</h2>
                  </a>
                </div>
                <div class="menuItem">
                  <a href="biographies.html"><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Biographies" />
                    <h2>Biographies</h2>
                  </a>
                </div>
              </div>

Answer 2

好的，我们开始吧，您需要重新构建标记以遵循引导标准

CSS

.container {
    background: yellow;
}

.thumbnail {
    width: 200px;
    display: inline-block;
}

HTML

<div class="container">
    <div class="thumbnail">
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>blah blah blah blah blah</p>
    </div>
    </div>
    <div class="thumbnail">
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>blah blah blah blah blah</p>
    </div>
    </div>
    <div class="thumbnail">
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>blah blah blah blah blah</p>
    </div>
    </div>
    <div class="thumbnail">
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>blah blah blah blah blah</p>
    </div>
    </div>
    <div class="thumbnail">
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>blah blah blah blah blah</p>
    </div>
    </div>
    <div class="thumbnail">
        <img src="http://placekitten.com/200/200" width="200" height="200" alt="" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>blah blah blah blah blah</p>
    </div>
    </div>
</div>

如果您想查看它的实际效果，请查看fiddle。我使图像具有响应性，因此请确保将窗口拉得足够远。在较小的视口上，图像将拉伸以适应。