Wie man col-md-12 in col-md-2 einfügen und volle Breite nehmen

Question

Ich hatte eine Zeile eingefügt (col-md-12) div innerhalb col-md-2 div. Ich möchte, dass div die volle Breite der Seite annimmt. Aber es braucht nur die Breite des Elternteils col-md-2. Wie kann ich dieses Problem im Bootstrap-Modus überwinden?

<div class="options-main row"> 
    <div class="col-md-2 col-sm-3 border-box">  
      <img src="#" class="img-responsive">   
     <div class="options-main-sub row"> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
     </div> 
    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
</div> 

Dies ist, wie es in Wirklichkeit aussieht. Jede Spalte in der ersten Zeile hat 6 entsprechende Spalten in der zweiten Zeile

Answer 1

Verwenden Sie separate row Elemente für jede Zeile, die Sie auf Ihrer Seite erstellen möchten. Dies ist ein grundlegendes Konzept im Bootstrap und Sie sollten nicht weitermachen, ohne dieses Konzept zu verstehen.

Ihr Problem kann wie folgt gelöst werden:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-2 col-xs-push-2"> 
 
     Content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div>

Bitte beachten Sie, oben auf Code-Schnipsel, habe ich col-md-x mit col-xs-x ersetzt gleichen Vorschau auf kleinen Bildschirmen zu sehen.

Beachten Sie auch die col-xs-push-x Klasse. Es wird verwendet, um den Offset einzustellen. Also nehme ich in dieser Demo an, dass entsprechend einem Eintrag in der zweiten Spalte der ersten Zeile 6 Spalten in der zweiten Zeile stehen.

Sie müssen eine class oder id Relation verwenden, um anzugeben, dass eine bestimmte zweite Zeile zu einem Eintrag in der ersten Zeile gehört.

---

Alternativ können Sie zweite Reihe in einem fixed Block umschließen

.hover { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-2 col-xs-push-2"> 
 
     Content 
 
     <div class="hover"> 
 
     <div class="row"> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

Beachten Sie jedoch, dass diese nicht eine Bootstrap-Art und Weise.