codepen 上的基本引导程序答案

【问题标题】：Basic Bootstrap on codepencodepen 上的基本引导程序
【发布时间】：2017-05-30 01:24:10
【问题描述】：

我正在尝试完成一个项目，我需要图像和它下方的文本位于中心。我已经尝试了一切，从中心块到只是试图改变 col-md-x。但是我找不到一个好的解决方案，我感觉好像有一个 col-md-8 和 col-md-4 隐藏在某个地方。你可以猜到我正在尝试学习引导程序，而且我是一个完整的新手。这里是the link。

<div class="thumbnail">
     <img src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">

   <div class="caption text-center">
     <blockquote><em> Some more text </em></blockquote>
   </div>
 </div>
   <div class="row">
     <div class="col-md-4"></div>
   <div class="col-md-4 col-md-offset-4">
     <h2> Title </h2>
     </div>

谢谢

【问题讨论】：

标签： twitter-bootstrap codepen

【解决方案1】：

添加类似center-block的css规则：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

这是 bootstrap 3.3.7 中的 CSS 规则：(REF center-block.less)

但似乎他们为 v4 删除了它，现在他们在 v4 中使用mx-auto：(REF LINK HERE)

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

Codepen：https://codepen.io/hdl881127/pen/YVozxo

body {
  margin-top: 50px;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-12">

        <h1 class="text-center text-primary"> Title </h1>
        <h2 class="text-center"> Some text </h2>

        <div class="thumbnail">
          <img class="center-block" src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">

          <div class="caption text-center">
            <blockquote><em> Some more text </em></blockquote>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="col-md-4 col-md-offset-4 text-center">
            <h2> Title </h2>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

请在下面的链接中找到答案 Updated code

body {
    margin-top: 50px;
}

Bootstrap 有一个用于中心对齐的类，即 text-center

【讨论】：