0

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

<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>

谢谢

4

2 回答 2

0

请在下面的链接中找到答案 更新的代码

body {
    margin-top: 50px;
}

Bootstrap 有一个用于中心对齐的类，即文本中心

于 2017-05-29T17:24:10.030 回答
0

添加一个CSS规则，如center-block：

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

这是引导程序 3.3.7 中的 CSS 规则：（REF center-block.less）

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

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

代码笔： 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>

于 2017-05-29T15:43:03.973 回答