Bootstrap 4 网格系统 - SM+ 中的 Flex 和 XS 中的 Row>Col

Question

我正在尝试创建一个专为 XL、LG、MD、SM 设计的菜单系统，但在 BOOTSTRAP4 中为 XS（移动）设计了不同的外观。

我有以下 HTML：

<div class="container-fluid">

  <div class="d-flex">

    <div class="mr-auto">

      <ul id='menu'>
        <li class="mt-1">
          <a href="#goto-list-books" class="nav-link open-popup"><span class="fas fa-th fa-lg"></span></a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>
      </ul>

    </div>


    <div class="d-flex">
      <div class="">

        <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
        </button>

      </div>
      <div class="">

        <form class="form-inline mr-1" action='/search' method='POST'>
          <div class="input-group input-group-sm mx-auto">
            <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
            <div class="input-group-append">
              <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
            </div>
          </div>
        </form>


      </div>
      <div class="">

        <div class="dropdown">
          <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

可以是found at JSFiddle.

这在大屏幕上运行良好，但在 XS 上它只是将所有内容压缩在一起，看起来很糟糕。我希望两个不同的方面继续到两个不同的行，但是当我添加 row>col 类时，它会否定 flexbox 实用程序。我怎样才能做到这一点？

这是大型显示器所需的布局：

上面的代码执行得还行。但对于 XS，我想要这样的布局：

我就是无法工作。现在我刚刚创建了两个完全独立的菜单 div，一个在 XS 上显示，一个用于其余的，因为我无法让 bootstrap4 做我想做的事。

如果有人知道如何在上面的代码中获取登录、搜索和下拉菜单，请帮助并告诉我。

Answer 1

更改引导类

<div class="container-fluid">

  <div class="d-sm-flex align-items-center"> /*Change Here*/

    <div class="d-flex justify-content-between">/*Change Here*/

      <ul id='menu'>
        <li class="mt-1">
          <a href="#goto-list-books" class="nav-link open-popup"><span class="fas fa-th fa-lg"></span></a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>
      </ul>

    </div>


    <div class="d-flex justify-content-between"> /*Change Here*/
      <div class="">

        <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
        </button>

      </div>
      <div class="flex-fill"> /*Change Here*/

        <form class="form-inline mr-1" action='/search' method='POST'>
          <div class="input-group input-group-sm mx-auto">
            <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
            <div class="input-group-append">
              <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
            </div>
          </div>
        </form>


      </div>
      <div class="">

        <div class="dropdown">
          <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/lalji1051/axL14kp5/3/