Блог

     <div id="page-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light bg-light" id="">
        <button class="navbar-toggler" id="menu-toggle"><span class="material-icons iconColor">notes</span></button>
        <div class="row">
          <div class="input-group col-8 searchBarMain">
              <input class="form-control py-2 border-right-0 border" placeholder="Type to search" id="example-search-input">
              <span class="input-group-append">
                  <button class="btn btn-outline-secondary border-left-0 border" type="button">
                      <i class="fa fa-search"></i>
                  </button>
                </span>
          </div>
          <div class="col-4 user-info float-right">
            <span>Firstname Lastname</span>
            <span class="material-icons iconColor">account_circle</span>
          </div>
      </div>
      </nav>
  </div>
 

Я пытаюсь выровнять элементы в дальней правой части экрана. Проблема в том, что элементы остаются в середине экрана, хотя я использую макет из 12 столбцов и far-right класс. Заранее спасибо.

Правило с BS — использовать его шаблон, и если alter должен быть мини-мини-mimimum. Не ставьте макет сетки для управления внешним видом навигационной панели BS. Для всех навигационных элементов справа используйте класс «ml-auto», если используется BS4, используйте класс «me-auto», если используется BS5

Вы немного перепутали код навигационной панели BS, поэтому я приведу ниже рабочий чистый код, вам просто нужно вырезать и вставить свои элементы в этот фреймворк. Вы можете видеть, что я применяю логотип mr-auto move к самому левому краю, а ml-auto-к

чтобы переместить все навигационные ссылки вправо

Если этот ответ подходит вам, пожалуйста, поставьте зеленую галочку, чтобы принять его в качестве окончательного ответа

 <nav class="navbar navbar-dark navbar-expand-sm fixed-top">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
           <a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="50" width="50"> </a> 
           <div class="collapse navbar-collapse" id="Navbar">
               <ul class="navbar-nav ml-auto">
                    <li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
                    <li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
                    <li class="navbar-item"><a class="nav-link" href="#">Menu</a></li>
                    <li class="navbar-item"><a class="nav-link" href="./contactus.html"> Contact</a></li>
                </ul>
            </div>
        </div>         
    </nav>