System grid

Defnyddiwch ein grid flexbox symudol-gyntaf pwerus i adeiladu cynlluniau o bob lliw a llun diolch i system deuddeg colofn, pum haen ymatebol ddiofyn, newidynnau a chymysgeddau Sass, a dwsinau o ddosbarthiadau wedi'u diffinio ymlaen llaw.

Sut mae'n gweithio

Mae system grid Bootstrap yn defnyddio cyfres o gynwysyddion, rhesi a cholofnau i osod ac alinio cynnwys. Mae wedi'i adeiladu gyda flexbox ac mae'n gwbl ymatebol. Isod mae enghraifft ac edrychiad manwl ar sut mae'r grid yn dod at ei gilydd.

Newydd i neu anghyfarwydd ag flexbox? Darllenwch y canllaw blwch fflecs CSS Tricks hwn ar gyfer cefndir, terminoleg, canllawiau a phytiau cod.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Mae'r enghraifft uchod yn creu tair colofn lled cyfartal ar ddyfeisiadau bach, canolig, mawr a mawr ychwanegol gan ddefnyddio ein dosbarthiadau grid rhagnodedig. Mae'r colofnau hynny wedi'u canoli yn y dudalen gyda'r rhiant .container.

O'i ddadansoddi, dyma sut mae'n gweithio:

• Mae cynwysyddion yn fodd i ganoli a phadio'n llorweddol cynnwys eich gwefan. Defnyddiwch .containerar gyfer lled picsel ymatebol neu ar .container-fluidgyfer width: 100%pob maint golygfan a dyfais.
• Mae rhesi yn ddeunydd lapio ar gyfer colofnau. Mae gan bob colofn lorweddol padding(a elwir yn gwter) ar gyfer rheoli'r gofod rhyngddynt. Mae hyn paddingwedyn yn cael ei wrthweithio ar y rhesi gydag ymylon negyddol. Fel hyn, mae'r holl gynnwys yn eich colofnau wedi'i alinio'n weledol i lawr yr ochr chwith.
• Mewn cynllun grid, rhaid gosod cynnwys o fewn colofnau a dim ond colofnau all fod yn blant rhesi uniongyrchol.
• Diolch i flexbox, bydd colofnau grid heb benodedig widthyn gosod yn awtomatig fel colofnau lled cyfartal. Er enghraifft, .col-smbydd pedwar achos o bob un yn awtomatig 25% o led o'r torbwynt bach ac i fyny. Gweler yr adran colofnau cynllun auto am ragor o enghreifftiau.
• Mae dosbarthiadau colofn yn nodi nifer y colofnau yr hoffech eu defnyddio allan o'r 12 posibl fesul rhes. Felly, os ydych chi eisiau tair colofn lled cyfartal ar draws, gallwch chi ddefnyddio .col-4.
• Mae colofnau widthyn cael eu gosod mewn canrannau, felly maen nhw bob amser yn hylif ac o faint o gymharu â'u rhiant elfen.
• Mae gan golofnau llorweddol paddingi greu'r cwteri rhwng colofnau unigol, fodd bynnag, gallwch chi dynnu'r margino'r rhesi ac paddingo'r colofnau .no-guttersgyda'r .row.
• Er mwyn gwneud y grid yn ymatebol, mae yna bum torbwynt grid, un ar gyfer pob torbwynt ymatebol : pob torbwynt (bach ychwanegol), bach, canolig, mawr, a mawr iawn.
• Mae torbwyntiau grid yn seiliedig ar ymholiadau cyfryngau lled lleiaf, sy'n golygu eu bod yn berthnasol i'r un torbwynt hwnnw a phawb sydd uwch ei ben (ee, .col-sm-4yn berthnasol i ddyfeisiau bach, canolig, mawr a mawr ychwanegol, ond nid y xstorbwynt cyntaf).
• Gallwch ddefnyddio dosbarthiadau grid wedi'u diffinio ymlaen llaw (fel .col-4) neu Sass mixins ar gyfer marcio mwy semantig.

Byddwch yn ymwybodol o'r cyfyngiadau a'r bygiau o amgylch flexbox , fel yr anallu i ddefnyddio rhai elfennau HTML fel cynwysyddion hyblyg .

Opsiynau grid

Er bod Bootstrap yn defnyddio ems neu rems ar gyfer diffinio'r rhan fwyaf o feintiau, pxdefnyddir s ar gyfer torbwyntiau grid a lled cynwysyddion. Mae hyn oherwydd bod lled y porth gwylio mewn picseli ac nid yw'n newid gyda maint y ffont .

Gweld sut mae agweddau ar system grid Bootstrap yn gweithio ar draws dyfeisiau lluosog gyda thabl defnyddiol.

Colofnau gosodiad awtomatig

Defnyddiwch ddosbarthiadau colofn torbwynt-benodol ar gyfer maint colofnau hawdd heb ddosbarth â rhif penodol fel .col-sm-6.

Cyd-led

Er enghraifft, dyma ddau gynllun grid sy'n berthnasol i bob dyfais a phorth gwylio, o xsi xl. Ychwanegwch unrhyw nifer o ddosbarthiadau heb uned ar gyfer pob torbwynt sydd ei angen arnoch a bydd pob colofn yr un lled.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Gellir rhannu colofnau lled cyfartal yn sawl llinell, ond roedd nam Safari flexbox a rwystrodd hyn rhag gweithio heb flex-basisneu border. Mae yna atebion ar gyfer fersiynau hŷn o borwyr, ond ni ddylent fod yn angenrheidiol os ydych chi'n gyfredol.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Gosod lled un golofn

Mae gosodiad awtomatig ar gyfer colofnau grid flexbox hefyd yn golygu y gallwch chi osod lled un golofn a chael y colofnau brodyr a chwiorydd yn newid maint yn awtomatig o'i chwmpas. Gallwch ddefnyddio dosbarthiadau grid wedi'u diffinio ymlaen llaw (fel y dangosir isod), cymysgeddau grid, neu led mewnol. Sylwch y bydd y colofnau eraill yn newid maint waeth beth fo lled colofn y ganolfan.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Cynnwys lled amrywiol

Defnyddio col-{breakpoint}-autodosbarthiadau i faint colofnau yn seiliedig ar led naturiol eu cynnwys.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Aml-res o led cyfartal

Creu colofnau lled cyfartal sy'n rhychwantu rhesi lluosog trwy fewnosod .w-100lle rydych chi am i'r colofnau dorri i linell newydd. Gwnewch y seibiannau yn ymatebol trwy gymysgu'r .w-100gyda rhai cyfleustodau arddangos ymatebol .

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Dosbarthiadau ymatebol

Mae grid Bootstrap yn cynnwys pum haen o ddosbarthiadau wedi'u diffinio ymlaen llaw ar gyfer adeiladu cynlluniau ymatebol cymhleth. Addaswch faint eich colofnau ar ddyfeisiadau bach, bach, canolig, mawr neu fawr ychwanegol sut bynnag y gwelwch yn dda.

Pob torbwynt

Ar gyfer gridiau sydd yr un peth o'r dyfeisiau lleiaf i'r mwyaf, defnyddiwch y .cola .col-*dosbarthiadau. Nodwch ddosbarth â rhif pan fydd angen colofn o faint arbennig; fel arall, mae croeso i chi gadw at .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Wedi'i bentyrru i lorweddol

Gan ddefnyddio un set o .col-sm-*ddosbarthiadau, gallwch greu system grid sylfaenol sy'n cychwyn wedi'i stacio ac yn dod yn llorweddol yn y torbwynt bach ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Cymysgu a chyfateb

Ddim eisiau i'ch colofnau stacio mewn rhai haenau grid yn unig? Defnyddiwch gyfuniad o ddosbarthiadau gwahanol ar gyfer pob haen yn ôl yr angen. Gweler yr enghraifft isod am well syniad o sut mae'r cyfan yn gweithio.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Gwteri

Gellir addasu cwteri yn ymatebol trwy badin torbwynt-benodol a dosbarthiadau defnydd ymyl negyddol. I newid y cwteri mewn rhes benodol, paru cyfleustodau ymyl negyddol ar y .rowa'r cyfleustodau padin cyfatebol ar yr .cols. Efallai y bydd angen addasu'r rhiant .containerneu'r rhiant hefyd i osgoi gorlifiad diangen, gan ddefnyddio cyfleustodau padin cyfatebol eto..container-fluid

Dyma enghraifft o addasu'r grid Bootstrap ar y torbwynt mawr ( lg) ac uwch. Rydym wedi cynyddu'r .colpadin gyda .px-lg-5, gwrthweithio hynny ag .mx-lg-n5ar y rhiant .rowac yna addasu'r .containerpapur lapio gyda .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Aliniad

Defnyddiwch gyfleustodau aliniad flexbox i alinio colofnau yn fertigol ac yn llorweddol. Nid yw Internet Explorer 10-11 yn cefnogi aliniad fertigol eitemau fflecs pan fo gan y cynhwysydd fflecs un min-heightfel y dangosir isod. Gweler Flexbugs #3 am ragor o fanylion.

Aliniad fertigol

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Aliniad llorweddol

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Dim cwteri

Gellir cael gwared ar y cwteri rhwng colofnau yn ein dosbarthiadau grid rhagosodol gyda .no-gutters. Mae hyn yn tynnu'r negatif margins o'r holl golofnau plant uniongyrchol .rowa'r llorweddol ohonynt.padding

Dyma'r cod ffynhonnell ar gyfer creu'r arddulliau hyn. Sylwch fod gwrthwneud colofnau yn cael eu cwmpasu i'r colofnau plant cyntaf yn unig a'u bod yn cael eu targedu trwy ddewiswr priodoleddau . Er bod hyn yn cynhyrchu dewisydd mwy penodol, gellir dal i addasu padin colofn ymhellach gyda chyfleustodau bylchu .

Angen dyluniad ymyl-i-ymyl? Gollwng y rhiant .containerneu .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Yn ymarferol, dyma sut mae'n edrych. Sylwch y gallwch chi barhau i ddefnyddio hwn gyda phob dosbarth grid wedi'i ddiffinio ymlaen llaw (gan gynnwys lled colofnau, haenau ymatebol, ail-archebion, a mwy).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

You may also apply this break at specific breakpoints with our responsive display utilities.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

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

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grid tiers

Gan symud y tu hwnt i'r colofnau eu hunain, efallai y byddwch hefyd yn addasu nifer yr haenau grid. Pe baech chi eisiau dim ond pedair haen grid, byddech chi'n diweddaru'r $grid-breakpointsac $container-max-widthsi rywbeth fel hyn:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wrth wneud unrhyw newidiadau i newidynnau neu fapiau Sass, bydd angen i chi gadw'ch newidiadau a'u hail-grynhoi. Bydd gwneud hynny yn cynhyrchu set newydd sbon o ddosbarthiadau grid wedi'u diffinio ymlaen llaw ar gyfer lled colofnau, gwrthbwyso ac archebu. Bydd cyfleustodau gwelededd ymatebol hefyd yn cael eu diweddaru i ddefnyddio'r torbwyntiau arferol. Gwnewch yn siŵr eich bod yn gosod gwerthoedd grid yn px(nid rem, em, neu %).