Bootstrap 4 Spalten überlaufen statt Größenänderung

Question

Ich habe 5-6 Frage/Antworten gelesen, kann aber nicht finden, was ich suche _ Bootstrap 4 Spalten verhalten sich nicht so, wie ich sie erwarte. Unterhalb von etwa 600px Gerätebreite überläuft die Kante, anstatt weiterhin in Größe

at 618px the columns are still reducing

at 538px the columns are overflowing

HTML zu reduzieren:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-9 col-md-12"> 
      <div class="outerDivBorder" id="photoBox"> 
       <div style="height: 10em;"></div> 
      </div><!-- /#photoBox --> 
     </div> 

     <div class="col-lg-3 col-md-12"> 
      <div class="outerDivBorder" id="dataBox"> 
       <div style="height: 10em;"></div> 
      </div><!-- /#dataBox --> 
     </div> 
    </div> 
</div><!-- /.container --> 

CSS:

.outerDivBorder { 
    width: 100%; 
    border: 1px solid #454343; 
    padding: 0 1rem; 
    margin: 1rem; 
    margin-top: 1.5rem; 
    margin-bottom: 2rem; 
} 

Vielen Dank im Voraus für jede Anleitung angeboten auf t sein:)

Answer 1

Sie setzen margin: 1rem; auf .outerDivBorder, und diese Marge schiebt Inhalte auf kleinen Bildschirmen. Verwenden Sie Polsterung auf col s statt - es kann mit Utility-Klasse für Polsterung, py-3 in diesem Fall geschehen:

.outerDivBorder { 
 
    width: 100%; 
 
    border: 1px solid #454343; 
 
    padding: 0 1rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-9 col-md-12 py-3"> 
 
      <div class="outerDivBorder" id="photoBox"> 
 
       <div style="height: 10em;"></div> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-3 col-md-12 py-3"> 
 
      <div class="outerDivBorder" id="dataBox"> 
 
       <div style="height: 10em;"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>