Как в navbar bootstrap делать отступ между li?

Question

[Максим]

Здравствуйте. У меня слева есть 4 пункта, мне нужно сделать справа от них (alugn right) ещё 3 пункта, но не получается.
1 меню ul во всю ширину, а костыли использовать не хочу. Можно мне как-нибудь после 4 пункта сделать отступ, чтобы 3 пункта были как раз с самого права?

html

Думал два ul сделать, но видать это не лучший выход.

<div class="container">
        <ul class="nav">
            <a class="nav-link" href="">Support</a>
            <a class="nav-link" href="">Delivery</a>
            <a class="nav-link" href="">Legal</a>
            <a class="nav-link " href="">About Us</a>
        </ul>
        <ul class="nav justify-content-end">
            <a class="nav-link" href="">Items</a>
            <a class="nav-link" href="">Login</a>
            <a class="nav-link" href="">Register</a>
        </ul>
      </div>

Answer 1

[Alex]

https://jsfiddle.net/kozack/aq9Laaew/306769/ — вариант с двумя <ul>

https://jsfiddle.net/kozack/jhLgcxpq/2/ — вариант с одним <ul>

Comments

[Вадим Кот]

Зачем вы в ответе пишите невалидный код? Или вы не знаете, что в ul не должны быть непосредственно вложены ссылки - убиваете напрочь всю семантику. В ul должны быть li, а внутри уже ссылки вкладывайте. Или спецификацию читают только трусы? И код бездумно копировать с вопроса зачем было? https://www.w3.org/TR/html50/grouping-content.html...
Я понимаю, что bs имеет случаи на каждую строку кода, но margin-right: auto; прописывать с помощью класса как то приучает верстальщиков знать только классы бутстрапа, научитесь смотреть дальше, чем документация бутстрапа.

[Alex]

Вадим Кот, Я взял код из вопроса — так как подразумеваю, что именно этот код использует автор вопроса. И именно на премере его кода — показал как решить его задачу. Для наглядности, и чтобы автору вопроса было понятнее. А следить за семантикой на сайте автора — не моя забота, а его.

Answer 2

[Максим Тимофеев]

Должно быть 2 ul. В одном 4 пункта во втором 3. Один влево, второй вправо

Comments

[Максим]

А у меня сколько, вы спойлер открывали с кодом?

[Максим Тимофеев]

Максим, нет, но тогда не понимаю в чем проблема, одни выравниваете слева, другие справа

[Максим]

Проблема в том, что nav имеет display: flex, а он в свою очередь занимает всю ширину и 2-ой ul уже не помещается в 1 строку с 1-ым ul и переносится вниз.

[Максим Тимофеев]

Максим, будет проще если сделаете в песочнице, тогда сразу найдутся куча вариантов. А то так долго из Вас по факту можно вытягивать.

[Максим]

Максим Тимофеев, Что не понятного? Я задал вопрос, как отступ сделать между li с помощью bootstrap классов.

[Максим Тимофеев]

Максим,

как отступ сделать между li с помощью bootstrap классов.

резиновый никак, но flex решает такие задачи на раз указанием выравнивания элемента. Но без песочницы можно решать вечно. Ибо окажется что там у вас еще что-то, а потом еще что-то. Воссоздайте в песочнице ситуацию. Если Вам лень, чего остальным должно быть не лень отвечать.

Answer 3

[Ice]

где тут вообще li, какие отступы?
посмотрите документацию, есть примеры с правым и левым блоком
https://getbootstrap.com/docs/4.1/examples/navbars/

Comments

[Максим]

Я образно выразился. li не обязательно добавлять. В документации нет нужной информации.
Ответ дан выше.