Question

我正在使用最新版本的bootstrap但是我似乎无法弄清楚如何将按钮置于下面的代码中。我只想要这个特定的缩略图，而不是全局，所以我不能改变CSS。

<div class="row">   
  <ul class="thumbnails">
    <li class="span4">
      <div class="thumbnail">
        <img src="http://placehold.it/400x200" alt="">
        <h3>Need A Price?</h3>
        <p>Fill in the Quote form and get a price within   30mins,We know you dont like waiting around</p>
          <div class="btn-group">
            <button class="btn btn-primary">Get A Quote</button>
          </div>
      </div>
    </li>
 </ul>
</div>

Answer 1

如果您只想将该按钮置于中心位置，那么您可以利用该.btn-group容器并将该元素与您自己的类一起定位，这样您就可以将该区域定义为display: block并简单地将按钮对齐，如下所示：

<强> CSS

.btn-centered {
  text-align: center;
  display: block;
}

HTML 会记下.btn-centered容器上使用的.btn-group类。

<div class="row">   
  <ul class="thumbnails">
    <li class="span4">
      <div class="thumbnail">
        <img src="http://placehold.it/400x200" alt="">
        <h3>Need A Price?</h3>
        <p>Fill in the Quote form and get a price within   30mins,We know you dont like waiting around</p>
          <div class="btn-group btn-centered">
            <button class="btn btn-primary">Get A Quote</button>
          </div>
      </div>
    </li>
 </ul>
</div>

演示：http://jsbin.com/ubiwip/2

Answer 2

这似乎对我有用：

<p align="center"><a href="#" class="btn btn-primary btn-block">TEST</a></p>

中心缩略图按钮引导程序

2 个答案: