Правый выравнивающий элемент в div-classе

Я использую угловой 2 с Bootstrap 4 и Angular Material . Однако у меня возникают проблемы с выравниванием элементов внутри моего контейнера div. Я хочу, чтобы обе кнопки и текст были выровнены с правой стороны

Вот какой код, который я пытался воспроизвести, как показано на фотографии

Some text

Неправильное совпадение

Я также пробовал это решение из StackOverflow

 

Some text

.asdf { margin-left:auto; margin-right:0; }

Оба этих решения не перемещают элементы вправо. Что я делаю не так?

Я удалил class pull-right classа как с button и p тега p и добавил class text-right в div.container .

Я думаю, что это то, что вам нужно.

     

Some text

В Bootstrap 4, pull-right был заменен float-right .

Если float-right не работает, помните, что Bootstrap 4 теперь flexbox , и многие элементы display:flex который может помешать работе float-right . В некоторых случаях classы утилит, такие как align-self-end или ml-auto выравнивают элементы, которые находятся внутри контейнера flexbox, например Bootstrap 4.row, Card или Nav. Ml ml-auto (margin-left: auto) используется в элементе flexbox для перемещения элементов вправо.

Кроме того, помните, что text-right прежнему работает с встроенными элементами.

Bootstrap 4 выровнять правильные примеры

Вы ничего не делаете неправильно. Просто скопируйте и вставьте свой код в любой редактор онлайн-загрузки, вы получите правильный результат. Но вы можете написать его более структурированным способом

Код HTML:

  

Some text

Код CSS

 .asdf { margin-left:auto; margin-right:0; }