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上，另一个显示在div上，因为我无法让bootstrap4来做我想要的事情。

请，如果有人知道如何获取登录名，请在上述代码中搜索并下拉至其单独的行，请帮助并显示我。

Answer 1

更改Bootstrap类

<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/

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

1 个答案: