Bootstrap CSS entwirft div-Boxen - Zentrierungsprobleme

Question

Ich versuche, Textfelder zu entwerfen: JS Fiddle. Ich möchte, dass sie zentriert sind, aber ich kann sie nicht in der Mitte der Seite erscheinen lassen, wenn sie nebeneinander sind. Ich würde deine Hilfe sehr schätzen!

.bottomboxes { 
 
     border-radius: 30px 30px 30px 30px; 
 
     -moz-border-radius: 30px 30px 30px 30px; 
 
     -webkit-border-radius: 30px 30px 30px 30px; 
 
     border: 1px solid #000000; 
 
     border: 1px solid #000000; 
 
     background: #aaaaaa; 
 
     text-align: center; 
 
     max-width: 200px; 
 
     margin: auto; 
 
    } 
 
    
 
    .rightbox { 
 
     margin-left: 20px; 
 
    }

<div class="row"> 
 
     <div class="col-sm-2 bottomboxes"> 
 
     <h3>text</h3> 
 
     <p>more text</p> 
 
     </div> 
 
     <div class="col-sm-2 bottomboxes rightbox"> 
 
     <h3>text</h3> 
 
     </div> 
 
    </div>

Answer 1

können Sie CSS Flexbox verwenden, aber dann müssen Sie nicht mit bottomboxes mit col-sm-1 Bootstrap 3 Klassen verwenden.

Überprüfen Sie die aktualisierte Fiddle (jsFiddle).

Etwas wie:

/* Parent (replaced with .row) */ 
.content-holder { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
} 

/* Childs (removed .col-sm-1) */ 
.bottomboxes { 
    flex: 1; /* both should be of equal size */ 
} 

/* Styling Resets */ 
html, body { width: 100%; height: 100%; } 

---

Um es mobil ansprechbar zu machen:

Sie müssen die Textfelder oben und unten sein. Nutzen Sie dazu die mobile Medienabfrage. Zur Kasse gehen Codepen.

Es sollte wie folgt aussehen:

/* On Mobiles (i.e. screen-width < 768px) */ 
@media screen and (max-width: 767px) { 
    .content-holder { 
    flex-direction: column; 
    } 
} 

hoffe, das hilft!

Answer 2

Sie können col-sm-2 für beide Divs in col-md-6 ändern und sie werden nebeneinander angezeigt. So wie:

<div class="row"> 
    <div class="col-md-6 bottomboxes"> 
    <h3>text</h3> 
    <p>more text</p> 
    </div> 
    <div class="col-md-6 bottomboxes rightbox"> 
    <h3>text</h3> 
    </div> 
</div>