Как разместить элементы начальной загрузки 4 элементов nav рядом друг с другом в меню мобильного гамбургера? - PullRequest
Новая
       12

Как разместить элементы начальной загрузки 4 элементов nav рядом друг с другом в меню мобильного гамбургера?

1 голос
/ 03 октября 2019

Я пытаюсь разместить элементы nav-item в мобильном представлении в меню гамбургеров рядом друг с другом. Я сделал фотошоп, что имею в виду (нет репутации, чтобы публиковать изображения: /): https://i.imgur.com/XUgZuQP.png

Элементы должны быть только рядом друг с другом на мобильном телефоне! 

<nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container">
            <a class="navbar-brand" href="#">Amazing Website</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Products</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            My Products
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link " href="#">2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">2</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

1 Ответ

0 голосов
/ 03 октября 2019

Используйте @media(max-width:767px) { display: flex; justify-content: space-between; } на родительском элементе элементов списка, например: https://codepen.io/bkdigital/pen/vYYBJJb

https://flexboxfroggy.com/ - Это забавная игра для изучения flexbox

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp - Это для того, чтобы выучить классы начальной загрузки 4 flex

Надеюсь, это поможет вам!

...