使用bootstrap如何在不使用绝对或负左边界的情况下使div位于导航容器之外

Question

目前，我有一个div，其中包含一些图标。我把它放在我的导航容器外面，这就是我想要的。我似乎能够使其正常工作的唯一方法是使css div变为绝对值，或给它留一个空白边距：-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

如果您不想使用绝对值，则需要将标题与导航分隔，并将下面的所有内容分隔到两个单独的容器中。

我将两者都设置为容器流体（全宽容器的引导类），然后创建一个行，并给它3个 col < / strong>，类似于：

<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）。

此时下面的部分，因为类容器具有固定的宽度，并且 col-6 适用于窗口百分比，所以两者的宽度将不同，因此您还可使用 d-d-d-lg-flex col-3 （空，将在移动设备上消失）， col-xs-12设置容器流体 col-lg-6 （目前位于容器中），以及另一个 d-d-n-d-lg-flex col-3 （空，将在移动设备上消失）。

Answer 2

使用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 3

由于我是新手，所以我不知道可以将不同部分的容器制成不同的大小。因此，几天后我仔细考虑了给出的答案，我意识到了这一点。我最终使用下面的代码创建了我想要的。我将导航容器设置为容器流体，并将外部div设置为col 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>