Bootstrap 4 offset: Grid system · Bootstrap

html — смещение Bootstrap 4 от центра

спросил

Изменено 4 года, 6 месяцев назад

Просмотрено 2к раз


Я хочу создать столбец в центре страницы из этого столбца. Я хочу еще один с небольшим смещением от него, но это влияет на центр.

 
    <дел>
        <дел>
            <ул>
                
  • Лорем ипсум
  • Лорем ипсум
  • Лорем ипсумус
  • Лорем ипсум
  • тест

    Изображение: 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