Настройка Navbar

Question

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

Я создал JS Скрипку здесь

Это html на данный момент:

<div class="container-fluid">
  <nav class="navbar navbar-expand-sm navbar-light">
    <a class="navbar-brand" href="#">Navbar</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 mr-auto">
        <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="#">Link</a>
        </li>
        <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">
            Dropdown
          </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>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>



      <div class="row no-gutters ml-auto">

        <div class="col-3">
          <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'>
                        <i class="fas fa-sign-in-alt mr5"></i>
                        Login
                    </button>
        </div>
        <div class="col-6 ml-auto">
          <form class="form-inline mr-1" action='/search' method='POST'>
                        <div class="input-group input-group-sm mx-auto">
                          <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
                          <div class="input-group-append">
                            <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
                          </div>
                        </div>
                    </form>
        </div>
        <div class="col-3 text-right">
          <div class="dropdown">
              <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
              </button>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
                <a class="dropdown-item" href="#">Dropdown Option</a>
              </div>
            </div>
        </div>


      </div>



    </div>
  </nav>
</div>

Я хочу, чтобы выровненные по правому краю пункты меню (в ряду) находились рядом друг с другом (например, mr-1 интервал для каждого элемента) - но col класс добавляет интервал между ними в режиме рабочего стола. Тем не менее, когда окно меньше, я хочу, чтобы они были в столбцах и хорошо располагались, когда вы выпадаете из меню. Я экспериментировал с flex-rows, но что бы я ни пытался, я не смог заставить его работать. Я не уверен, что размещение строки в панели навигации было правильным способом go. Я все еще новичок в bootstrap4, так что я не уверен, что лучший способ go об этом. Любая помощь приветствуется.

В конечном итоге, я хочу, чтобы мои меню выглядели, но я не могу понять, как структурировать их с помощью BootStrap 4:

В LG:

И размер экрана XS: (я не мог заставить Menu 1 полностью переместиться вправо, чтобы выровняться по выпадающему меню )

Я мог бы легко сделать это в bootstrap3, но по некоторым причинам я изо всех сил пытаюсь понять, как работает 4. Это не обязательно должна быть навигационная панель, если вышеупомянутое может быть достигнуто только с помощью строк и столбцов, я хотел бы услышать это.

Answer 1

Вы можете попробовать добавить pu sh / pull, как показано здесь https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h Это один из вариантов. В верхнем ряду вы можете достичь результата несколькими способами, одним из которых является использование ofset, как показано ниже В примере используется средний размер, вам нужно будет изменить его для вашего конкретного макета.

<div class="row row-fluid"> // row to be inside of a container
<div class="col-md-2">
Your burger-menu here
</div>
<div class="col-md-2 offset-md-8">
Your burger-menu here
</div>
</div>

Затем начните новую строку для выпадающего списка поиска по логину, но все еще в той же переменной

<div class="row row-fluid">
<div class="col-md-2">
login code
</div>
<div class="col-md-8">
search code
</div>
<div class="col-md-2">
dropdown code
</div>
</div>

Очевидно, что, как и в Bootstrap 3, вам нужно настроить столбцы для работы для всех разных размеров. Если приведенное выше не работает с вашим макетом, попробуйте методы pu sh и pull, чтобы использовать текущую конфигурацию для перемещения элементов div на свои места.