Входы Boostrap и панель навигации

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

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity = "sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin = "anonymous">

<nav class = "navbar-nav navbar-expand-sm fixed-top">
  <div class = "container">
    <a class = "navbar-brand"><img src = "path1610.png"></a>
    <div class = "col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
      <form class = "navbar-form">
        <div class = "input-group">
          <input type = "text" class = "form-control" placeholder = "Let's rock!">
          <div class = "input-group-append">
            <button class = "btn btn-outline-primary"><i class = "fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarHidden" aria-controls = "navbarHidden" aria-expanded = "false" aria-label = "Toggle navigation"><span class = "navbar-toggler-icon"></span></button>
    <div class = "collapse navbar-collapse" id = "navbarHidden">
      <ul class = "navbar-nav ml-auto">
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-user fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link">
            <span class = "fas fa-bell fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-fire fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-cog fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-comments fa-2x">
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

css twitter-bootstrap bootstrap-4

26.06.2018 18:53

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Просто изменил внешний класс навигации с navbar-nav на navbar и изменил container на container-fluid для полной ширины.

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity = "sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin = "anonymous">

<nav class = "navbar navbar-expand-sm fixed-top">
  <div class = "container-fluid">
    <a class = "navbar-brand"><img src = "path1610.png"></a>
    <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarHidden" aria-controls = "navbarHidden" aria-expanded = "false" aria-label = "Toggle navigation"><span class = "navbar-toggler-icon"></span>
    </button>
    <div class = "col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
      <form class = "navbar-form">
        <div class = "input-group">
          <input type = "text" class = "form-control" placeholder = "Let's rock!">
          <div class = "input-group-append">
            <button class = "btn btn-outline-primary"><i class = "fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <div class = "collapse navbar-collapse" id = "navbarHidden">
      <ul class = "navbar-nav ml-auto">
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-user fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link">
            <span class = "fas fa-bell fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-fire fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-cog fa-2x"></span>
          </a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">
            <span class = "fas fa-comments fa-2x">
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

26.06.2018 22:05

Другие вопросы по теме

Как изменить цвет значка значка начальной загрузки?

Измените действие открытия мобильной навигации, щелкнув ссылку, а не значок

Как остановить распространение и одновременно разрешить модальное окно?

Bootstrap 4.1 фиксированный div с переполнением y и полной шириной

Как сделать два независимых прокручиваемых столбца?

Изображения 100% ширины прокручиваются по горизонтали

Перерисовка или пересчет ширины Datatable (ов) внутри модального окна начальной загрузки

Высота изображения Jumbotron

<a> Это обе ссылки на привязку И переключает сворачивание переключателя данных

Всплывающая подсказка Bootstrap имеет белый фон

Входы Boostrap и панель навигации

Ответы 1

Другие вопросы по теме

Похожие вопросы