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

这基本上取决于屏幕上的响应性，我共享代码，请检查此-

<Select
  options={options}
  value={options.find(({ label }) => label === values.select)}
  onChange={value => setFieldValue("select", value.label)}
  onBlur={() => setFieldTouched("select")}
/>

Answer 2

editor finished with error: Success 的范围是tail /etc/incron.conf # Parameter: editor # Meaning: editor executable # Description: This name or path is used to run as an editor for editing # user tables. # Default: vim editor = nano 到576像素，不会影响屏幕宽度小于该值的

如果您想使col-sm始终最小为5，可以像这样直接在Bootstrap 4中使用min-width

col

---

而且，您不应跳过Bootstrap的container和row级别而直接使用col-5，可以将<div class="container"> <div class="row"> <form class="col-5 col-md-6"> <div class="form-group row"> <label class="col-form-label">Search :</label> <div class="col"> <div class="form-row"> <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> </div> </div> </form> </div> </div> 或col用作你想要

否则，当布局变得复杂时，您可能会遇到填充，边距或浮点清理问题

Answer 3

只需添加

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

到您的输入字段div，然后根据屏幕尺寸根据所需大小调整“ 2”。

Codepen

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

Answer 4

使用引导网格系统根据您的屏幕尺寸进行管理。 您可以从下面的链接中了解更多信息，希望可以找到解决方案。 Follow the link for details