Question

我正在尝试将3个缩略图水平放在彼此旁边并居中。这些问题是他们没有集中。我也想知道我是否可以简化代码，因为例如<div class="column">在所有3个部分中都是重复的。但是，当我尝试这样做时，图片垂直堆叠而不是水平堆叠，我不知道为什么。所以我的问题是：

如何将3张图片集中在页面上？
如何在不垂直堆叠图像的情况下简化代码？

当前代码

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

Answer 1

不确定我是否正确理解了你的问题，但无论如何都试了一下。这是你想要的吗？

我删除了所有<div class="column">并替换为单<div class="row">

我还为每个缩略图设置col大小为col-xs-4。

使用您的代码查看此链接以获取示例： http://jsfiddle.net/p9k3x/

Answer 2

如果我理解你的要求，你需要：

向您的<div class="container">和<div class="row">标记添加码。
删除<div class="column">代码
将您的<div class="col-sm-6 col-md-3">更改为<div class="col-xs-4>

container类将页面中该div内的元素居中。您希望所有col-xx-##类嵌套在<div class="row">内。此外，Bootstrap 3是“Mobile First”，因此在col-xs-##类分组中完成的任何操作都将由更大的屏幕分辨率继承。使用col-xs-4类的原因是因为您需要3个总列，因此您需要占用12个列空间中的4个。这有点反直觉。 Here is some Bootstrap 3 documentation on the grid system.

我希望这能回答你的问题！快乐的编码。

进行这些更改后，您的代码应如下所示：

 <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>
    </div><!-- End Row Div --> 


</div><!-- End Container Div -->

水平对齐缩略图以Bootstrap 3为中心

2 个答案: