html - 使用 bootstrap 如何在不使用绝对或负左边距的情况下制作位于导航容器外部的 div

Question

目前我有一个包含一些图标的 div。我把它放在我的导航容器外面，这就是我想要的。我似乎能够让它工作的唯一方法是使 css div 绝对或给它一个 margin-left: -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

如果您不想使用绝对，则需要将 header 与导航以及下方的所有内容分开到两个单独的容器中。

我将两者都设置为 container-fluid(全宽容器的 Bootstrap 类)，然后创建一个 row 并给它 3 个 col，类似于:

<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 在窗口百分比上工作，因此两者将具有不同的宽度，因此您也可以用d-none d-lg-flex col-3设置一个container-fluid(空的，会在移动设备上消失)，col-xs-12 col-lg-6(现在容器中的内容在里面)，和另一个 d-none d-lg-flex col-3(空的，将在移动设备上消失)。