Question

这是我的代码 https://www.codeply.com/go/dsqKr2ncWB

这基本上是我希望它看起来像，它以最大的分辨率工作。

Large res

将其缩小到平板电脑尺寸似乎没有调整选择

的大小

tablet res

调整大小确实可以在电话尺寸变得非常小的情况下发挥作用

phone res

我已经尝试了所有我能想到的，有谁知道我应该改变什么？感谢

Answer 1

问题似乎与您使用form-group有关。如果您切换到input-group，则可以确保在设备大小缩小时进行更一致的响应式更改。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 offset-md-4">
      
      <div class="card">
        <div class="card-header text-center">
          <h1 class="font-weight-bold">Lorem ipsum dolor sit amet nullam</h1>
          <h2 class="font-weight-bold">Lorem ipsum dolor sita</h2>
        </div>

        <div class="card-body">
          <form class="form-inline justify-content-center">
          
          <div class="input-group mx-0 mx-md-3">
            <select name="p" size="1" title="Department List" class="custom-select">
            <option value="%">-All-</option>
            <option value="TEST">Lorem ipsum dolor sit amet</option>
            <option value="TEST2">Lorem ipsum dolor sit amet, consectetur amet</option>
            </select>
            
            <div class="input-group-append">
              <button class="btn btn-red" type="submit">Go</button>
            </div>
          </div>
          
          </form>
        </div>
      </div>
      
    </div>
  </div>
</div>

我也将按钮绑在input-group上......这只是确保无论屏幕大小如何，按钮都不会跳转到新行。 custom-select也替换了form-control以提供更一致的样式。

请注意，我还指定了mx-0以确保在较小的设备上正确删除X轴边距。这似乎是Bootstrap的媒体查询在没有拼写出来的情况下总是做的事情。

在卡体内部选择响应能力 - bootstrap 4

1 个答案: