Bootstrap 4 Reihen und Spalten stapeln vertikal statt horizontal

Question

Ich denke, das sollte einfach sein, aber ich versuche, meine .temp und .city divs nebeneinander zu bekommen, aber sie stapeln vertikal statt .

Ich habe versucht, die Größe der Spalten zu ändern, aber sie stapeln immer übereinander. Irgendwelche Ideen?

  <div class="col-lg" id="col2"> 
      <div class="row"> 
       <div class="col-lg"> 
       <div class="wind"></div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-lg" id="col3"> 
       <div class="temp"></div> 
       <div class="city"></div> 
       </div> 
      </div> 
      </div> 

Answer 1

Sie sollten Ihren Code zu diesem, so dass die zweite Reihe zwei Spalten bearbeiten.

<div class="col-lg" id="col2"> 
     <div class="row"> 
      <div class="col-lg"> 
      <div class="wind"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col temp"></div> 
      <div class="col city"></div> 
     </div> 
     </div> 

Answer 2

Sie wickeln können temp div und city div in zwei verschiedenen Spalten. Überprüfen Sie diese Bootstrap4 Example.

.wind, 
 
.temp, 
 
.city { 
 
    height: 50px; 
 
    border: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-sm" id="col2"> 
 
    <div class="row"> 
 
    <div class="col-lg"> 
 
     <div class="wind"></div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg" id="col3"> 
 
     <div class="temp"></div> 
 
    </div> 
 
    <div class="col-lg" id="col3"> 
 
     <div class="city"></div> 
 
    </div> 
 
    </div>

Answer 3

Sie können Ihren HTML-Code in diesem Format neu anordnen.