Bootstrap 3中水平对齐缩略图到中心

Posted 2023-03-06

【中文标题】Bootstrap 3中水平对齐缩略图到中心

【英文标题】：Horizontal align thumbnails to center in Bootstrap 3

【发布时间】：2013-08-25 23:50:34

【问题描述】：

我试图让 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"  />
      <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"  />
      <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"  />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这是标准的 Bootstrap 3。通过在第一个 div 中将“行”更改为“列”，图片垂直堆叠，但我不确定这是否正确。

【参考方案1】：

不确定我是否正确理解了您的问题，但还是试了一下。这是你想要的吗？

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

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

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

【参考方案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 是“移动优先”，因此在 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"  />
          <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"  />
          <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"  />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>
    </div><!-- End Row Div --> 


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