2

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

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

当前代码

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

2 回答 2

3

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

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

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

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

于 2013-08-23T03:54:37.407 回答
0

如果我理解您的要求正确，您需要：

  1. 将 a<div class="container">和<div class="row">标签添加到您的代码中。
  2. 删除<div class="column">标签
  3. 改变你<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-4class 的原因是因为你想要总共 3 个列，所以你想占用 12 个列空间中的 4 个。这有点违反直觉。这是有关网格系统的一些 Bootstrap 3 文档。

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

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

 <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 -->
于 2013-09-25T20:14:19.977 回答