Используя bootstrap, как я могу сделать div, который находится вне контейнера nav без использования абсолютного или отрицательного левого поля

Question

В настоящее время у меня есть div, который содержит несколько значков.Он у меня за пределами моего навигационного контейнера, как я и хочу.Единственный способ, которым я смог заставить его работать, - это сделать абсолютный абсолютный размер CSS или оставить его с полем слева: -110px.

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

Вот мой текущий код

<nav class="navbar navbar-expand-lg bg-light navbar-dark fixed-top" id="mainNav">
    <div class="mysocion text-white ml-5">
      <a href="https://www.facebook.com/xxxxxxx">
        <i class="fab fa-facebook fa-2x mr-2"></i>
      </a>
      <a href="">
        <i class="fab fa-twitter fa-2x mr-2"></i>
      </a>
      <a href="https://www.instagram.com/xxxxxxxxx">
        <i class="fab fa-instagram fa-2x"></i>
      </a>
    </div>
    <div class="container">
      <div class="headerlogo">
        <a class="navbar-brand" href="#page-top">
          <img src="img/xxxxxxxx.png" alt="" class="img-fluid">
        </a>
      </div>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fa fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav text-uppercase mr-auto">
          <li class="nav-item dropdown">xxxxxxxxxxxxxx</a>
            <ul class="dropdown-menu">
              <li>
                <a href="xxxxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
              </li>
              <li>
                <a href="xxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
              </li>
              <li>
                <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxxx</a>
              </li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link js-scroll-trigger dropdown-toggle" href="xxxxxxxxxxx.html" data-toggle="dropdown">xxxxxxx</a>
            <ul class="dropdown-menu">
              <li>
                <a href="xxxxx.html" class="dropdown-item">Trash It Door Step</a>
              </li>
              <li>
                <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxx</a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="aboutxxxx.html">xxxxxxxxxxx</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="requestxxxxx.html">xxxxxxxxx</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="xxxxxt.html">xxxxxx Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer 1

Вы можете просто применить position:absolute (или отрицательное поле) только тогда, когда ширина страницы превышает минимальную ширину, на которой вы хотите отобразить ее вне контейнера, используя запрос @media.Пример:

@media(min-width: 1300px) {
  #your-div {
    position: absolute;

    /* code here only applies to #your-div when page is wider than 1300px */
  }
}

А вот живой пример с Bootstrap.Запустите его в полноэкранном режиме и измените размер окна вашего браузера:

#your-div {
  background-color: #c00;
  color: white;
  display: flex;
  align-items: center;
  min-height: 40px;
  white-space: nowrap;
}

@media(min-width: 1300px) {
  #your-div {
    position: absolute;
    right: calc(100% + 10px);
  }
}

@media (max-width: 767px) {
  #your-div {
    display: none;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav class="site-header sticky-top py-1">
  <div class="container d-flex flex-column flex-md-row justify-content-between position-relative">
    <a class="py-2" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
    </a>
    <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
    <div id="your-div" class="px-2">Your div</div>
  </div>
</nav>
<div class="container" style="background-color: #f9f9f9;min-height: calc(100vh - 90px);"></div>

Answer 2

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

<nav class="navbar navbar-expand-lg bg-light navbar-dark fixed-top" id="mainNav">
<div class="container-fluid">
  <div class="col-lg-3 d-flex flex-row-reverse mysocion text-white mr-2">
    <a href="https://www.facebook.com/xxx">
      <i class="fab fa-facebook fa-2x mr-2"></i>
    </a>
    <a href="">
      <i class="fab fa-twitter fa-2x mr-2"></i>
    </a>
    <a href="https://www.instagram.com/xxxxx/">
      <i class="fab fa-instagram fa-2x mr-2"></i>
    </a>
  </div>
  <div class="hlogo mr-5">
    <a class="navbar-brand" href="home.html">
      <img src="img/Logocroped.png" alt="" class="img-fluid">
    </a>
  </div>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    Menu
    <i class="fa fa-bars"></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav text-uppercase mr-auto">
      <li class="nav-item dropdown">xxxxxxxxxxxxxx</a>
        <ul class="dropdown-menu">
          <li>
            <a href="xxxxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
          </li>
          <li>
            <a href="xxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
          </li>
          <li>
            <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxxx</a>
          </li>
        </ul>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link js-scroll-trigger dropdown-toggle" href="xxxxxxxxxxx.html" data-toggle="dropdown">xxxxxxx</a>
        <ul class="dropdown-menu">
          <li>
            <a href="xxxxx.html" class="dropdown-item">Trash It Door Step</a>
          </li>
          <li>
            <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxx</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="aboutxxxx.html">xxxxxxxxxxx</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="requestxxxxx.html">xxxxxxxxx</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="xxxxxt.html">xxxxxx Us</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

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

Я бы установил для обоих container-Жидкость (класс начальной загрузки для контейнера полной ширины), затем вы создаете строку и даете ей 3 столб , что-то вроде:

<div class="container-fluid">
  <div class="row"> // may be row-fluid instead, can try
    <div class="col-xs-12 col-lg-3">
      <div class="pull-right"> Your icons div </div>
    </div>
    <div class="col-xs-12 col-lg-6">
      <nav> Your nav bar stuff </nav>
    </div>
    <div class="d-none d-lg-flex col-lg-3">
    </div>
  </div>
</div>

Таким образомна мобильном устройстве: скрыть третий столбец и установить первый и второй значения на полную ширину (col-xs-12).

Часть, расположенная ниже в этой точке, поскольку класс container имеет фиксированную ширину и col-6 работает с процентом окна, оба будут иметь различную ширину, поэтому вы также можете установить container-liquid с d-none d-lg-flex col-3 (пусто, исчезнет на мобильном телефоне), col-xs-12 col-lg-6 (с тем, что находится внутри контейнера прямо сейчас), и другое d-none d-lg-flex col-3 (пусто, исчезнет на мобильном телефоне).