Я хочу создать столбец в центре страницы из этого столбца. Я хочу еще один с небольшим смещением от него, но это влияет на центр.
<дел>
<дел>
<ул>
Лорем ипсум
Лорем ипсум
Лорем ипсумус
Лорем ипсум
тест
Изображение: https://i.imgur.com/8BK73oF.png Как это сделать в boostrap 4
html
css
bootstrap-4
блок, в котором находится список, всегда должен быть горизонтально центрирован?
Во-первых, вы хотите, чтобы блок смещения имел col-3 , а смещение было равно offset-1 . Всего 4 столбца. Поэтому, если вы хотите, чтобы блок списка располагался по центру, слева от него также должен быть блок из 4 столбцов. И, следовательно, блок списка должен занимать 4 столбца, т. е. столбец-4 .
<дел>
<дел>
<ул>
Лорем ипсум
Лорем ипсум
Лорем ипсумус
Лорем ипсум
тест
Скрипка: https://jsfiddle.net/aq9Laaew/91196/
0
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Bootstrap Offset
Обзор
Это здорово, когда содержимое наших страниц просто плавно распространяется по всей доступной ширине и удобно меняет размер и порядок при изменении ширины отображения, но иногда нам нужно дать элементам некоторое пространство вокруг, чтобы они «дышали» никаких дополнительных элементов вокруг них, поскольку баланс является ключом к получению легкого и дружелюбного внешнего вида, легко передающего наш контент тем, кто посещает страницу. Это свободное пространство наряду с отзывчивым поведением наших страниц является важным элементом дизайна наших страниц.
В последней версии самого популярного мобильного фреймворка — Bootstrap 4 — есть специальный набор инструментов, предназначенных для размещения наших элементов именно там, где они нам нужны, и изменения этого размещения и внешнего вида в зависимости от ширины отображаемой страницы экрана. – Это так называемые классы offset и push / pull . Они работают очень просто и интуитивно понятно в сочетании с инфиксами уровня сетки, такими как -sm-, -md- и так далее.
Советы по работе с плагином Bootstrap Offset:
Общий их синтаксис довольно прост — у вас есть действие, которое необходимо выполнить — например, .offset , наименьший размер сетки, который вам нужен. применить от и выше – например, -md и значение для необходимого действия в количестве столбцов – например, -3 . Все это объединяет результаты .offset-md-3 , которые сместят нужный элемент столбца на 3 столбца вправо от его положения по умолчанию на экранах среднего размера и выше. .offset всегда сдвигает свое содержимое вправо.
Пример
Перенос столбцов вправо с использованием классов .offset-md-* . Эти конкретные классы улучшают левое поле столбца на * столбцов. Например, .offset-md-4 оперирует .col-md-4 над четырьмя столбцами.
<дел>
.col-md-4
.col-md-4 .offset-md-4
<дел>
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
<дел>
.col-md-6 .offset-md-3
Серьезный фактор
Здесь важно отметить, что по сравнению с Bootstrap 4 alpha 6 инфикс -xs был удален, поэтому для самых маленьких размеров экрана — менее 34em или 554 px инфикс размера сетки опущен — классы инструментов смещения получить желаемое количество столбцов. Таким образом, приведенный выше пример станет чем-то вроде .offset-3 и будет работать на всех размерах экрана, если не определено правило для более широкой области просмотра — вы можете сделать это, просто назначив соответствующие .offset- ~ здесь некоторый размер области просмотра ~ - ~ некоторое количество столбцов ~ классов для одного и того же элемента.
Этот подход работает, если вам нужно стилизовать один элемент. Однако, если вы по какой-то причине хотите сместить элемент в соответствии с окружающими его элементами, вы можете использовать классы .push- и .pull , которые обычно делают то же самое, но заполняют свободное пространство следующим элемент, если это возможно. Так, например, если у вас есть два элемента столбца — первый шириной 4 столбца, а следующий — шириной 8 столбцов (оба заполняют всю строку), применяя .push-sm-8 для первого элемента и .pull-md-4 для второго фактически изменит порядок, в котором они отображаются на маленьких окнах просмотра и выше.
Всего 4 столбца. Поэтому, если вы хотите, чтобы блок списка располагался по центру, слева от него также должен быть блок из 4 столбцов. И, следовательно, блок списка должен занимать 4 столбца, т. е. 
Это свободное пространство наряду с отзывчивым поведением наших страниц является важным элементом дизайна наших страниц.
Все это объединяет результаты 
Таким образом, приведенный выше пример станет чем-то вроде 