codepen上的基本引导程序

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

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

感谢

来源

2017-05-29 Peter

添加CSS规则像center-block：

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

这是自举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>

来源

2017-05-29 15:43:03

请查阅以下链接的答案 Updated code

body { 
    margin-top: 50px; 
}

引导具有居中对齐，即文本中心

类

来源

2017-05-29 17:24:10 Shiladitya

codepen上的基本引导程序

回答

相关问题