0

大家好！

我目前正在使用 twitter bootstrap 3 开发一个网站，但我遇到了一些问题。我正在尝试将我拥有的 3 个缩略图居中。文本居中，图像居中，但我似乎无法让缩略图居中。这是我的代码：

       <div class="row">
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">    
  <img src="img/test.png">
        <div class="caption">
    <p>test</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
 <img src="img/test.png">
        <div class="caption">
          <p>test</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
  <img src="img/test.png>
        <div class="caption">
          <p>test</p>
        </div>
      </div>
    </div>

CSS：

    .thumbnail {
    background-color: #cecece;
    border: 1px solid #666;
    text-align:center;
}
4

1 回答 1

2

  1. 要将您的内容集中在页面上，请将行包装在容器中 ()

  2. 请注意，Bootstrap 使用 12 列网格。要使用中等 (md) 网格的树形拇指填充您的行，请考虑col-md-4为您的列使用类 (3 x 4 = 12) 类。在小 (sm) 网格上，通过使用三倍的col-sm-6类，您现在有 3 列 50%。考虑只使用一个类，col-md-4对于 992 像素或更宽的屏幕宽度，只有该类会为您提供 3 列，并且只有col-sm-4该类会这样做，但屏幕宽度为 768 像素或更宽。在 992 或 768 之下，列将堆叠。

  3. 文本可以通过应用text-center类来居中，另见http://getbootstrap.com/css/#type-alignment

另见： http: //www.bootply.com/WAFUzlJs8s

于 2014-09-06T21:26:18.070 回答