codepen上的基本Bootstrap

Question

我正在努力完成一个项目，我需要图像和它下面的文字在中心。我尝试了所有的方法，从中心块开始，只想改变col md-x。然而，我找不到一个好的解决方案，我觉得好像有一个col 8和col 4隐藏在某个地方。正如您可以猜到的，我正在尝试学习bootstrap，并且我是一个完全的新手。这是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>

谢谢

Answer 1

添加一个css规则，如center-block

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

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

但似乎他们在v4中删除了它，现在他们在v4中使用mx-auto：(参考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>

​

Answer 2

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

body {
    margin-top: 50px;
}

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