Question

我正在使用bootstrap，我希望在md，lg和xml屏幕中选择4个水平相邻的菜单并使用＆＃34;搜索＆＃34;与4选择垂直对齐：

然后在较小的设备中我想要而不是水平相邻的4个选择菜单我希望上面有2个选择菜单，下面有2个选择菜单，如：

但是我没有成功实现这一点，你知道如何实现这个目标吗？

第一点是工作，4个选择菜单是水平相邻的，但问题是某些文本被隐藏，因为选择菜单大小不够大。另外两点我没有成功实现它们。

HTML：

<body>
  <div class="container py-4">
    <div class="row mb-3 mb-md-0">
      <div class="col">
        <h1 class="text-center d-md-none my-0 h5 text-heading-blue font-weight-bold">Search</h1>
      </div>
    </div>
    <div class="row">
      <div class="col d-flex justify-content-center align-items-center">
        <h1 class="d-none d-md-block w-100 mr-auto my-0 h5 text-heading-blue font-weight-bold">Search</h1>
        <form class="mr-2">
          <select class="form-control font-weight-normal text-gray" id="">
            <option selected class="selected">Order By P1</option>
            <option>i2</option>
          </select>
        </form>
        <form class="mr-2">
          <select class="form-control font-weight-normal text-gray" id="">
            <option selected class="selected">Order By P2</option>
            <option>i1</option>
          </select>
        </form>
        <form class="mr-2">
          <select class="form-control font-weight-normal text-gray" id="">
            <option selected class="selected">Order By P3</option>
            <option>i2</option>
          </select>
        </form>
        <form>
          <select class="form-control font-weight-normal text-gray" id="">
            <option selected class="selected">Order by P4</option>
            <option>i1</option>
          </select>
        </form>
      </div>
    </div>
  </div>
</body>

Answer 1

你非常接近，你的结构有些问题，使用Grid框架代替d-flex可以更好地实现。以下是我将如何实现您期望的结果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="container">
  <div class="row justify-content-center align-items-center">
    <div class="col-12 col-md-6">
      <h1 class="text-md-center">Search</h1>
    </div>
    
    <div class="col-12 col-md-6">
      <div class="row">
        <div class="col-6 col-md-3 mb-4 mb-md-0">
          <form>
          <select class="custom-select form-control" id="i1">
          <option selected>Order By 1</option>
          <option>i2</option>
          <option >i2</option>
          </select>
          </form>
        </div>

        <div class="col-6 col-md-3 mb-4 mb-md-0">
          <form>
          <select class="custom-select form-control" id="i2">
          <option selected>Order By 2</option>
          <option>i2</option>
          <option >i2</option>
          </select>
          </form>
        </div>
        
        <div class="col-6 col-md-3">
          <form>
          <select class="custom-select form-control" id="i3">
          <option selected>Order By 3</option>
          <option>i2</option>
          <option >i2</option>
          </select>
          </form>
        </div>

        <div class="col-6 col-md-3">
          <form>
          <select class="custom-select form-control" id="i4">
          <option selected>Order By 4</option>
          <option>i2</option>
          <option >i2</option>
          </select>
          </form>
        </div>
      </div>
              
    </div>
  </div>
</div>

可以在此处查看Bootply示例：https://www.bootply.com/6VbSYN0Rlj

此示例依赖于更具响应性的类，例如将“搜索”对齐中心放在较大的屏幕上，然后放在较小的屏幕上。它还利用Grid框架（带有嵌入式row来帮助排列所有内容。我们需要在前两个select选项和最后两个选项之间添加边距，并且有一个响应边距类。

响应选择菜单布局

1 个答案: