css - bootstrap div 无法在小屏幕上保持宽度

Question

我尝试用这段代码创建 3 个输入

  <div class="col-sm-5 col-md-6">
    <form>
      <div class="form-row">
        <div class="col-0.5 search-label">
          <label class="control-label">Search :</label>
        </div>
        <div class="col">
          <input type="text" v-model="company_name" @keyup="userFilterGlobal" class="form-control" placeholder="Company">
        </div>
        <div class="col">
          <input type="text" v-model="fullname" @keyup="userFilterGlobal" class="form-control" placeholder="Fullname">
        </div>
        <div class="col">
          <input type="text" v-model="email" @keyup="userFilterGlobal" class="form-control" placeholder="Email">
        </div>
      </div>
    </form>
  </div>

它工作正常，但在不同的分辨率下，它会中断，例如

到此为止。但当屏幕较小时，输入再次变得巨大。

当屏幕变得比图片 1 小时，我怎样才能使它保持与图片 1 相同的输入尺寸？

测试用码笔https://codepen.io/anon/pen/oRYZBx

Answer 1

只需添加

<div class="col-2 col-xs-2 col-sm-2 col-md-2">

到您的输入字段 div 并根据屏幕尺寸根据您需要的尺寸调整“2”。

Codepen

可以在引导网格系统上找到更多信息 page