Bootstrap ml auto не работает

ml-auto не перемещает ссылки на панели навигации вправо

Я использую reactstrap и перехожу по этой ссылке:

В этом примере сдвигает вправо. Однако то, что я пытаюсь реализовать (что действительно похоже на пример), рендерится рядом с .

Я проверял синтаксис около 100 раз, и он выглядит правильно. Имеющийся у меня собственный CSS, которого очень мало, похоже, ничего не отменяет. CSS в консоли выглядит очень похоже, и, похоже, на него влияют:

По крайней мере, отключение этого параметра в консоли в этом примере перемещает прямо рядом с , как в моем приложении (чего я не хочу). Вот что я смотрю:

Пример Reactstrap (правильный интервал):

Консоль для моего приложения (неправильный интервал):

Как правильно настроить интервал в моем приложении?

Мне действительно непонятно, что влияет на работу margin-left: auto !important в одном, а не в другом.

2 ответа

Компоненты панели навигации (и многие другие компоненты) будут работать только в том случае, если вы будете использовать их так, как они были разработаны для использования.

Например, ml-auto работает с родственными элементами .

Это НЕ сработает, если вы разрушите эти родственные отношения.

Другими словами, вы не можете просто случайным образом обернуть элементы в ненужные div.

Удалите div, который вы поместили вокруг переключателя навигационной панели и компонента свертывания, чтобы селектор сестры работал должным образом.

Также: НЕ используйте флаг !important в качестве постоянного решения в любом из ваших пользовательских CSS. Этот флаг предназначен только для быстрого тестирования.

P.S. Похоже, у вас есть привычка заворачивать вещи в ненужные div. container тоже завернут в такой бесполезный div. Не добавляйте ненужный код для какой-то «эстетики». Добавляйте код, только если он действительно что-то делает, и используйте комментарии для всего остального.

Объяснение того, как работает ml-auto .

Похоже, это уже было решено в комментариях. Я просто хотел добавить объяснение, что ml-auto не работает, потому что его родительский элемент flexbox должен быть во всю ширину панели навигации. Так что эту проблему также можно было решить, добавив w-100 к дополнительному div ..

Источник

Bootstrap 4 — Управление margin и padding отступами

Статья, в которой рассмотрим классы Bootstrap 4, с помощью которых можно не только очень просто, но и адаптивно добавлять margin и padding отступы.

Синтаксис классов для задания margin и padding отступов

Bootstrap 4 включает в себя набор классов, с помощью которых можно очень легко добавлять к HTML элементам необходимые margin и padding отступы.

Именуются эти классы следующим образом:

Вместо необходимо указать первую букву названия отступа, т.е. m или p ( m – для margin , p – для padding ).

Вместо необходимо указать сторону ( t — для задания отступа только сверху, b – снизу, l – слева, r – справа) или несколько сторон ( x – слева и справа, y – сверху и снизу). Если не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо нужно указать контрольную точку ( sm , md , lg , или xl ). Другими словами, определить минимальную ширину viewport, начиная с которой, отступы, задаваемые этим классом, будут действовать.

При этом необходимо помнить, что контрольные точки задают именно минимальную ширину viewport. Это означает, что, например, класс с sm будет действовать не только на sm , но и на всех следующих контрольных точках ( sm -> md -> lg -> xl ). Т.е. до тех пор, пока его действие будет не переопределено с помощью другого класса (например, с помощью lg ).

Вместо необходимо задать величину отступа (посредством одного из следующих значений):

• 0 (равно 0 );
• 1 (равно $spacer * .25 );
• 2 (равно $spacer * .5 );
• 3 (равно $spacer );
• 4 (равно $spacer * 1.5 );
• 5 (равно $spacer * 3 );
• auto (равно auto ) — можно использовать только для margin .

$spacer — это SCSS переменная Bootstrap 4, значение которой, по умолчанию, равно 1rem. А 1rem в большинстве браузеров равен 16px. В итоге, например, размер 4 будет равен 24px (16px * 1.5).

Примеры использования

Рассмотрим примеры использования классов Bootstrap для установления HTML-элементам padding и margin оступов.

Пример 1. Установим HTML-элементу padding отступ сверху, равный 3:

Пример 2. Расположим 2 блока по центру. Для этого первому блоку установим в качестве свойства margin-left значение auto с помощью класса ml-auto , а второму margin-right:auto — с помощью класса mr-auto . Кроме этого дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3 .

Пример 3. Установим блоку:

• margin отступы слева и справа, равные auto ( mx-auto );
• на xs margin отступы сверху и снизу, равные 2 ( my-2 );
• на sm и md (т.е. >sm ) margin отступы сверху и снизу, равные 3 ( my-sm-3 );
• на lg и xl (т.е. >lg ) margin отступы сверху и снизу, равные 4 ( my-lg-4 );
• на всех контрольных точках padding отступы для 4 сторон, равные 3 ( p-3 ).

Пример 4. Установим элементу на xs margin отступ снизу, равный 4. На остальных контрольных точках этот отступ уберём, т.е. установим его, равным 0.

Пример 5. Установим HTML-элементу:

• по умолчанию ( min-width >= 0 или xs ) padding отступы, равные 0 ( p-0 );
• на sm и следующих контрольных точках padding отступ слева, равный 3( pl-sm-3 );
• на md и следующих контрольных точках (т.е. >md ) margin уберём отступ слева (установим его равным 0, т.е. pl-md-0 ) и добавим отступ справа, равный 4 ( pr-sm-4 ).

Источник

Bootstrap 4. Контейнер и сетка. Часть 3

Изменение порядка следования

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде. Изменить визуальный порядок следования адаптивного блока выполняется посредством класса order- <1…12>. Этот класс предназначен xs устройств. Для изменения порядка для sm , md , lg или xl используется класс order-— <1…12>.

Число от 1 до 12 определяет то, как элементы будут визуально следовать на странице. А именно — все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс order , то по умолчанию он имеет значение 0.

Ещё один пример — с использованием адаптивных классов order . На устройствах xs и sm визуальный порядок порядок следования будет таким же, как в HTML коде. А на устройствах md и выше — первым будет Sidebar left , вторым — Page contrnt , а третьим — Sidebar right .

Классы order-first и order--first оказывают своё действие посредством установки элементу CSS свойства order в значение -1. А классы order-last и order--last — в значение 13. Поэтому предыдущий пример можно сделать проще:

Смещение адаптивных блоков

Смещение с использованием классов offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок. Данные классы имеют следующий синтаксис — offset- <1…12>или offset-— <1…12>.

Смещение с использованием классов margin

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов ( margin-left:auto или margin-right:auto ). Данный вариант смещения используют, когда блоки необходимо сместить относительно друг от друга на которую переменную величину. Классы margin отступов имеют вид ml-auto , mr-auto , ml--auto и mr--auto .

Классы для margin и padding

Bootstrap 4 включает в себя набор классов, с помощью которых можно легко добавлять к HTML элементам необходимые margin и padding отступы. Имена этих классов имеют вид:

Вместо необходимо указать первую букву названия отступа, m – для margin , p – для padding .

Вместо необходимо указать сторону:

• t – для задания отступа сверху ( top )
• b – для задания отступа снизу ( bottom )
• l – для задания отступа слева ( left )
• r – для задания отступа справа ( right )
• x – для задания отступа слева и справа
• y – для задания отступа сверху и снизу

Если не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо необходимо задать величину отступа – 0 , 1 , 2 , 3 , 4 , 5 или auto (только для margin ). Значение 1 означает 0.25rem , значение 2 – 0.5rem , значение 3 – 1rem , значение 4 – 1.5rem , значение 5 – 3rem .

Примеры использования

Установим HTML-элементу padding-top , равный 1rem :

Расположим два блока по центру. Для этого первому блоку установим margin-left:auto с помощью класса ml-auto , а второму – margin-right:auto с помощью класса mr-auto . Кроме этого, дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3 .

Установим элементу на xs устройствах margin-bottom , равный 1.5rem . Для всех остальных устройств этот margin уберём.

Классы для плавающих блоков

Классы для свойства display

Для установки свойства display используются классы

Вместо необходимо указать значение none , inline , inline-block , block , table , table-cell , table-row , flex , inline-flex .

Источник

Bootstrap ml auto не работает

Быстрое управление компоновкой, выравниванием и калибровкой столбцов сетки, навигации, компонентов и т.д., с полным набором гибких утилит flexbox. Для более сложных реализаций может потребоваться пользовательский CSS.

Задействуйте «гибкое» поведение

Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.

Также существуют отзывчивые варианты .d-flex и .d-inline-flex .

Направление

Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).

Используйте элемент класса .flex-row для задания горизонтального направления (умолчание браузера), или .flex-row-reverse для того, чтобы горизонтальное направление начиналось с противоположной стороны.

Используйте класс .flex-column для создания вертикального направления, или .flex-column-reverse , чтобы вертикальное направление начиналось с противоположной стороны.

Для flex-direction также есть отзывчивые вариации.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Выравнивайте содержимое

Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column ). Выбирайте из start (умолчание браузера), end , center , between или around .

Отзывчивые вариации для justify-content .

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

Выравнивание элементов

Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column ). Выбирайте из start , end , center , baseline или stretch (умолчание браузера).

Отзывчивые вариации для align-items .

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Align self

Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column ). Выбирайте из таких же параметров, как у align-items : start , end , center , baseline или stretch (умолчание браузера).

Отзывчивые вариации для align-self .

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

Авто-марджины

Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю ( .mr-auto ), 3. «прижимаем» два элемента к левому краю ( .ml-auto ).

К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content . Смотри детали здесь.

Источник