Что делает смещение в Bootstrap 4?

Question

Я слежу за учебником по созданию веб-страницы, а инструктор создал раздел с классом «col-sm-offset-1». Что это делает с содержанием в div с этим классом? Вот полный код:

<div class = "col-sm-10 col-sm-offset-1">https://jsfiddle.net/zmtmphtq/

Answer 1

В основном Col-см-офсет-1 будет оставить объем пространства на левой и основного содержания положить в сторону правого

вы также можете сделать это, давая Левое поле также ...

Answer 2

в Bootstrap 3 col-*-offset-* будет работать, чтобы компенсировать (движение вправо) столбец, но в Bootstrap 4 это было изменено на offset-*-1, так что разметка будет:

<div class="col-sm-10 offset-sm-1">

http://www.codeply.com/go/sbruTFHL6q

Answer 3

В Botstratp v4 использовать offset-sm-1 как:

<div class = "col-sm-10 offset-sm-1"> 

Answer 4

В соответствии с бутстрапе 4.0 .offset класс доступен.

1. Использование класса .offsetSee bootstrap offset documentaion

<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> 

2. Или используйте класс .mr (маржа-справа) .ml (mrgin-слева) See bootstrap spacing documentaion

`<div class="row"> 
    <div class="col-4 mr-5">col-4</div> 
    <div class="col-4 ml-5">col-4</div> 
</div>` 

3. Или создайте пустой столбец размером с

`<div class="row"> 
    <div class="col-4"></div> 
    <div class="col">col-4</div> 
</div>` 

4. Или использовать. mr-auto компенсировать в следующей колонке

`<div class="row"> 
    <div class="col-4 mr-auto">col-4</div> 
    <div class="col-4">col-4</div> 
</div>` 

See the code in this codepen

Примечание: Bootstrap Альфа v4 не имеет .offset класс, Убедитесь, что использовать Bootstrap 4.0.

Answer 5

Вы также должны помнить, использовать функцию смещения offset-* с той же сеткой, которую вы используете. например <div class="col-lg-2 col-md-6 text-center offset-lg-1"> some text here</div> или <div class="col-sm-2 col-md-6 text-center offset-sm-1"> some text here</div> таким образом, чтобы сохранить код чистого

Answer 6

Inaddition к @ Моррису можно центрировать основной столбец с .mx-auto, так что вам не нужно использовать MR-авто и МЛ-авто вместе.

Как сказано выше в бутстрапе, для моделирования столбца использовалось смещение по 3 столбцам, поэтому вам не нужно создавать пустой столбец.