freeCodeCamp/guide/arabic/bootstrap/grid-examples/index.md

title	localeTitle
Grid Examples	أمثلة الشبكة

أمثلة الشبكة

شجرة أعمدة متساوية

`

One of three columns

One of three columns

One of three columns

`

ينشئ المثال أعلاه ثلاثة أعمدة متساوية العرض على الأجهزة الصغيرة والمتوسطة والكبيرة ، والكبير جدًا باستخدام فئات الشبكة المحددة مسبقًا. يتم توسيط تلك الأعمدة في الصفحة مع الأصل. .container .

ثلاثة أعمدة غير متساوية

`

.col-sm-3

.col-sm-6

.col-sm-3

`

اثنان أعمدة غير متساوية

`

.col-sm-4

.col-sm-8

`

أعمدة مع اثنين من الأعمدة المتداخلة

`

.col-sm-8

.col-sm-6

.col-sm-6

.col-sm-4

`

مختلط موبايل وسطح المكتب

`` `أتش تي أم أل

.col-xs-7 .col-sm-6 .col-lg-8

.col-xs-5 .col-sm-6 .col-lg-4

.col-xs-6 .col-sm-8 .col-lg-10

.col-xs-6 .col-sm-4 .col-lg-2

``#### Clear Floats

Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content: ``

أتش تي أم أل

العمود 1 تغيير حجم نافذة المتصفح لمعرفة التأثير.

العمود 2

العمود 3

العمود 4

#### Offsetting Columns Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by * columns:

أتش تي أم أل

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

#### Push And Pull - Change Column Ordering Change the order of the grid columns with `.col-md-push-*` and `.col-md-pull-*` classes:

أتش تي أم أل

.col-sm-4 .col-sm-push-8

.col-sm-8 .col-sm-pull-4

`` `

معلومات اكثر:

Bootstrap الشبكة