Question

嘿伙计们！

我目前正在使用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;
}

Answer 1

将您的内容集中在页面上，将行包装在一个容器中（）
请注意，Bootstrap使用12列网格。要使用树拇指为中（md）网格填充行，请考虑为列使用col-md-4类（3 x 4 = 12）类。在小（sm）网格上，通过使用col-sm-6类的三倍，您现在有3列50％。考虑只使用一个类，只有col-md-4类会为您提供3列，屏幕宽度为992像素或更宽，只有col-sm-4类才会相同，但屏幕宽度为768像素和更宽。在992或768之下，列将堆叠。
通过应用text-center课程可以使文字居中，同时参见http://getbootstrap.com/css/#type-alignment

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

Twitter-bootstrap-3 |缩略图居中？

1 个答案: