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

Я новичок в начальной загрузке, поэтому все еще пытаюсь понять это.

Чего я хотел бы добиться, так это чтобы логотип бренда был выровнен по левому краю, а значок телефона и значок навигации по гамбургеру - справа. Это должно выглядеть так:

Код, который я использую «неправильно», можно увидеть здесь:

https://www.codeply.com/go/rFsHK3IT8g

Как видите, в настоящее время на экране смартфона все они выровнены по левому краю.

Любая помощь будет принята с благодарностью. Спасибо.

html css bootstrap-4 alignment nav

15.04.2019 07:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

866

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я поместил значок и гамбургер в div и добавил к нему классы начальной загрузки и добавил ниже css

.brand-hamburger {
  width: 100%;
}

.brand-hamburger {
  width: 100%;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity = "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin = "anonymous">
<nav class = "navbar navbar-expand-md navbar-light bg-light fixed-top" style = "padding:0px;margin:0;">

  <div class = "row no-gutters brand-hamburger">
    <div class = "col-sm">
      <a class = "navbar-brand" href = "#" style = "padding:0px;margin:0;">
        <img src = "https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
      </a>
    </div>
    <div class = "d-flex no-gutters">
      <div class = "col-sm ml-auto">
        <a style = "color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href = "tel:000-000-000" class = "d-block d-md-none">
          <i class = "fas fa-phone fa-2x"></i>
        </a>
      </div>
      <div class = "col-sm ml-auto">
        <button style = "color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExampleDefault" aria-controls = "navbarsExampleDefault" aria-expanded = "false"
          aria-label = "Toggle navigation">
    				<i class = "fas fa-bars  fa-2x"></i>
    			</button>
      </div>
    </div>
  </div>





  <div class = "collapse navbar-collapse" id = "navbarsExampleDefault">
    <ul class = "navbar-nav ml-auto">

      <li class = "nav-item">
        <a class = "nav-link" href = "#">About Us</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Our Team</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Contact Us</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Affiliations</a>
      </li>

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

<main role = "main" class = "container">

  <div class = "starter-template">
    <h1>Bootstrap starter template</h1>
    <p class = "lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main>

Это покажет «О нас», «Наша команда» и т. д. В двух строках. Проверьте полный просмотр страницы вашего ответа.

— 15.04.2019 08:12

15.04.2019 08:04

Ответ принят как подходящий

Нет необходимости в структуре row-col. Просто используйте шаблон, предоставленный bootstrap, для создания панели навигации, он должен работать нормально, и, поскольку у вас есть 2 кнопки справа, держите их в d-flex div.

Обновлен этот раздел в коде ниже

<a class = "navbar-brand" href = "#" style = "padding:0px;margin:0;">
    <img src = "https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class = "d-flex ml-auto">
    <a style = "color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href = "tel:000-000-000" class = "d-block d-md-none">
      <i class = "fas fa-phone fa-2x"></i>
    </a>
    <button style = "color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExampleDefault" aria-controls = "navbarsExampleDefault" aria-expanded = "false"
      aria-label = "Toggle navigation">
            <i class = "fas fa-bars  fa-2x"></i>
        </button>
  </div>

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src = "//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class = "navbar navbar-expand-md navbar-light bg-light fixed-top" style = "padding:0px;margin:0;">
  <a class = "navbar-brand" href = "#" style = "padding:0px;margin:0;">
    <img src = "https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class = "d-flex ml-auto">
    <a style = "color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href = "tel:000-000-000" class = "d-block d-md-none">
      <i class = "fas fa-phone fa-2x"></i>
    </a>
    <button style = "color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExampleDefault" aria-controls = "navbarsExampleDefault" aria-expanded = "false"
      aria-label = "Toggle navigation">
            <i class = "fas fa-bars  fa-2x"></i>
        </button>
  </div>
  <div class = "collapse navbar-collapse" id = "navbarsExampleDefault">
    <ul class = "navbar-nav ml-auto">

      <li class = "nav-item">
        <a class = "nav-link" href = "#">About Us</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Our Team</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Contact Us</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Affiliations</a>
      </li>
    </ul>
  </div>
</nav>

<main role = "main" class = "container">
  <div class = "starter-template">
    <h1>Bootstrap starter template</h1>
    <p class = "lead">Use this document as a way to quickly start any new project.
      <br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</main>

Спасибо, Нандита. Да, это работает хорошо, и это то, что я хотел. Я выбрал это из других решений, так как его легче понять, и для моей задачи его будет легче реализовать для дальнейших дополнений, которые мне нужно сделать. Спасибо вам всем за ответы.

— 16.04.2019 01:18

15.04.2019 08:06

Сделайте один родительский div внутри этого div, поместите оба значка display:flex для родительского div и в строке div укажите ширину: 100%, это будет работать и для мобильного устройства.

<nav class = "navbar navbar-expand-md navbar-light bg-light fixed-top" style = "padding:0px;margin:0;">
       <div class = "row no-gutters" style = "width: 100%;">
          <div class = "col-sm">
             <a class = "navbar-brand" href = "#" style = "padding:0px;margin:0;">
             <img src = "https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
             </a>
          </div>
          <div class = "mobile-device" style = "display:flex">
             <div class = "col-sm ml-auto">
                <a style = "color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href = "tel:000-000-000" class = "d-block d-md-none">
                <i class = "fas fa-phone fa-2x"></i>
                </a>      
             </div>
             <div class = "col-sm ml-auto">
                <button style = "color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExampleDefault" aria-controls = "navbarsExampleDefault" aria-expanded = "false" aria-label = "Toggle navigation">
                <i class = "fas fa-bars  fa-2x"></i>
                </button>
             </div>
          </div>
       </div>
       <div class = "collapse navbar-collapse" id = "navbarsExampleDefault">
          <ul class = "navbar-nav ml-auto">
             <li class = "nav-item">
                <a class = "nav-link" href = "#">About Us</a>
             </li>
             <li class = "nav-item">
                <a class = "nav-link" href = "#">Our Team</a>
             </li>
             <li class = "nav-item">
                <a class = "nav-link" href = "#">Contact Us</a>
             </li>
             <li class = "nav-item">
                <a class = "nav-link" href = "#">Affiliations</a>
             </li>
          </ul>
       </div>
    </nav>
    <main role = "main" class = "container">
       <div class = "starter-template">
          <h1>Bootstrap starter template</h1>
          <p class = "lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
       </div>
    </main>

15.04.2019 08:06

Хорошо, я немного изменил ваш html. Вы можете увидеть рабочий код здесь: https://www.codeply.com/go/paFQ52qLUK

Что вам нужно сделать, это просто: