twitter-bootstrap
Grid Häckning

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
Sök…


Introduktion

I Bootstrap är det möjligt att använda rutnätkolumner i andra kolumner. Detta är användbart när du skapar avancerade responsiva layouter som använder flera rutnätnivåer .

Anmärkningar

Vi kan ha så många kolumner som möjligt på ovan nämnda sätt.

Häckande kolumner

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Exemplet är hämtat från [ http://getbootstrap.com/css/#grid-nesting????1]

som dokumentationen på den officiella webbplatsen antyder

Lägg till en ny .row och en uppsättning .col-sm- * -kolumner i en befintlig .col-sm- * -kolumn för att häcka ditt innehåll med standardrutnätet. Kapslade rader bör inkludera en uppsättning kolumner som lägger till upp till 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).

ange bildbeskrivning här



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow