Grundlegende Bootstrap auf Codepen

Question

Ich versuche ein Projekt zu vervollständigen und ich brauche das Bild und den Text darunter, um in der Mitte zu sein. Ich habe alles versucht, von center-block und nur versuchen, die Col-md-x zu ändern. Allerdings kann ich keine gute Lösung finden und ich habe das Gefühl, da ist irgendwo ein Col-MD-8 und Col-MD-4 versteckt. Wie Sie erraten können, versuche ich Bootstrap zu lernen, und ich bin ein kompletter Neuling. Hier ist 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> 

Dank

Answer 1

In der Regel ein css wie center-block:

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

Dies ist eine CSS-Regel 3.3.7 in Bootstrap ist: (REF center-block.less)

aber scheint, wie sie entfernen es für v4, jetzt benutzen sie mx-auto in v4: (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>

Answer 2

finden Sie die Antwort in untenstehenden Link Updated code

body { 
    margin-top: 50px; 
} 

Bootstrap

eine Klasse für Zentrum align heißt text-Zentrum hat