Warum überlappen sich meine Bootstrap-Spalten?

Ich mache eine Website mit einem einseitigen Layout, wobei jeder Abschnitt die volle Breite hat und die gleiche Höhe wie das Ansichtsfenster hat. Ich benutze Bootstrap, um den Inhalt innerhalb dieser Abschnitte ansprechbar zu machen, aber meine Spalten überschneiden sich (anstatt zu stapeln), wenn ich die Größe des Darstellungsfensters verkleinere und ich kann nicht herausfinden warum.Warum überlappen sich meine Bootstrap-Spalten?

Hier ist (Teil) meine CSS & html (hoffentlich es genügend Informationen liefert, das Problem zu bestimmen):

.contact { 
 
\t min-height: 100vh; 
 
    background-color: rgb(225, 138, 64); 
 
    position: relative; 
 
} 
 

 
#map { 
 
\t height: 40vh; 
 
\t width: 80%; 
 
\t background: white; 
 
\t position: absolute; 
 
\t margin-top: 270px; 
 
\t margin-left: 20px; 
 
\t display: block; 
 
} 
 

 
.otherdiv { 
 
    height: 40vh; 
 
\t width: 80%; 
 
\t background: white; 
 
\t position: absolute; 
 
\t margin-top: 270px; 
 
\t margin-left: 20px; 
 
\t display: block; 
 
} 
 

 
.maxWidth { 
 
\t max-width: 90%; 
 
}

<div id="contact" class="contact"> 
 
\t 
 
\t <div class="container maxWidth"> 
 
     <h1>Contact</h1> 
 
     
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
       <p>Some text.</p> 
 
       <div id="map"></div> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <div class="otherdiv"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
\t 
 
</div>

Quelle

2016-04-10 M Plomp

Ich weiß nicht genau, was passiert, weil die Bootstrap-Stile fehlen, aber ich denke, es ist, weil Sie 'col-md-3' verwenden, also' md' für eine 'mittlere' Auflösung stehen (nicht die genaue Auflösung). Probieren Sie 'col-xs-3' – kabaehr

Es passiert, weil Sie' position: absolute; 'verwenden, entfernen Sie es überall und es wird funktionieren. Zusätzlich könnten Sie ein Bild des Ergebnisses liefern, das Sie erreichen möchten. – Roman

Sie haben position:absolute Eigenschaft sowohl von Ihrer div id und Klasse zu entfernen. Wie folgt der

#map { 
    height: 40vh; 
    width: 80%; 
    background: white; 
    margin-top: 270px; 
    margin-left: 20px; 
    display: block; 
} 

.otherdiv { 
    height: 40vh; 
    width: 80%; 
    background: white; 
    margin-top: 270px; 
    margin-left: 20px; 
    display: block; 
}

Heres CODEPEN example.Now es richtig stapeln ist.

Quelle

2016-04-11 00:32:26 AVI

Danke, das hat es behoben! –

Achten Sie darauf verwenden, um das richtige Raster Ansichtsfenster in Ihrer Spalt .

Bootstrap hat vier von ihnen (xs, sm, md und lg) und sie arbeiten für ihre definierten Breiten und höher. Wenn Sie die Spalten mit md einstellen, funktionieren sie nur in einem Fenster mit mindestens 992px. Wenn Sie möchten, dass diese Spalten immer die Hälfte des Bildschirms belegen, verwenden Sie die Klasse col-xs-6.

können Sie finden diese Informationen in Bootstrap's official documentation

Quelle

2016-04-10 22:28:49

Warum überlappen sich meine Bootstrap-Spalten?

Antwort

Verwandte Themen