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

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

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

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

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

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

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

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

Для Bootstrap-5 мы должны использовать ms-auto вместо ml-auto

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

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

<nav class="navbar navbar-expand-md navbar-light bg-faded">
     <a class="navbar-brand" href="#">reactstrap</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
     </button>
     <div class="w-100">
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                ...
            </ul>
        </div>
     </div>
 </nav>

ml-auto работает из-за того, что родительский элемент flexbox по умолчанию «сжимает» элементы дочернего блока. Он не имеет ничего общего с родственными элементами и будет нормально работать только с одним дочерним элементом в родительском элементе flexbox: https://www.codeply.com/go/xPaoNJMzbG

Вот хорошая статья о том, как автоматические поля работают с flexbox

Начиная с Bootstrap 5 2021, есть некоторые изменения в названиях сторон утилит интервалов.

• Левое поле теперь называется "Начало поля", поэтому используйте ms вместо ml.

• Пример: для установки параметра margin-left в auto: используйте ms-auto

• Аналогично для установки поля слева на 3: используйте ms-3 вместо ml-3

Вы можете узнать больше о новых именах сторон для полей и отступов в официальной документации начальной загрузки BootStrap Spacing Utilities < / а>

В Bootstrap-5 есть некоторые изменения, раньше это было ml-auto для margin-left: auto, которое теперь заменено на ms-auto, аналогично mr-auto заменено на me-auto. Однако для верха и низа он такой же, как и в более ранних версиях bootstrap, то есть в версиях до bootstrap-5.

для получения дополнительных сведений посетите документы

Я использую [email protected]. Если вы столкнулись с этой проблемой в 2021 году, это связано с тем, что произошла миграция и изменилось имя класса.

.ml- * и .mr- * в .ms- * и .me- *.

аналогично было изменено имя многих других классов.

Ссылка для проверки миграции

Ссылка на миграцию Bootstrap