bootstrap(-vue) 中具有响应式设计的小型输入字段

Question

我尝试创建一个输入表单，其中包含小字段和它们之间的符号。

目前它是结合经典 HTML 和 Bootstrap-Vue 完成的。正如您在屏幕截图中所见。有用。但仅限于大屏幕。它没有反应。在手机上看起来像这样：

最后一个字段被按钮覆盖，字段太小以至于看不到输入。

如果我只使用 bootstrap，字段和间距太大了，我找不到缩小它们的方法。而且我认为将按钮放在移动设备的新行中是个好主意。但是我该怎么做呢？

我的代码如下所示：

<b-row>
  <b-col class="mt-3" cols="2">
    &nbsp;
  </b-col>
  <b-col class="mt-3">
    <b>Kundennummer:</b>
  </b-col>
</b-row>
<b-row>
  <b-col class="mt-3" cols="2">
    &nbsp;
  </b-col>
  <b-col class="mt-3 ml-0" cols="4">
    <table>
      <tr>
        <td class="m-0 p-0">
          <b-form-input id="case_no_0" ref="case_no_0" type="text" v-model="custNo[0]" :state="state[0]" maxlength="3" @focus="$event.target.select()" @input="formatter(0)"></b-form-input>
        </td>
        <td class="m-0 p-0">
          &nbsp;.&nbsp;
        </td>
        <td class="m-0 p-0">
          <b-form-input id="case_no_1" ref="case_no_1" type="text" v-model="custNo[1]" :state="state[1]" maxlength="3" @focus="$event.target.select()" @input="formatter(1)"></b-form-input>
        </td>
        <td class="m-0 p-0">
          &nbsp;.&nbsp;
        </td>
        <td class="m-0 p-0">
          <b-form-input id="case_no_2" ref="case_no_2" type="text" v-model="custNo[2]" :state="state[2]" maxlength="3" @focus="$event.target.select()" @input="formatter(2)"></b-form-input>
        </td>
        <td class="m-0 p-0">
          &nbsp;-&nbsp;
        </td>
        <td class="m-0 p-0">
          <b-form-input id="case_no_3" ref="case_no_3" type="text" v-model="custNo[3]" :state="state[3]" maxlength="4" @focus="$event.target.select()" @input="formatter(3)" @keyup.enter="validateAndSave()"></b-form-input>
        </td>
      </tr>
    </table>
  </b-col>
  <b-col class="mt-3">
    <b-button class="btn-evm-orange" @click="validateAndSave()">Senden</b-button>
  </b-col>
</b-row>

编辑：

对于问我为什么不只使用 bootstrap 的人以及 Sirence 的回答

字段越来越大，我希望它们既漂亮又小，刚好足够容纳 3 个数字。对比截图如下：

PC-View

移动视图

Answer 1

如果您不需要 table，这是一种使用 bootstrap 响应式列类以及一些实用程序类来实现响应式表单的方法:

  <b-row class="no-gutters">
  <b-col class="col-2 col-md-1">
    <b-form-input type="text" maxlength="3"></b-form-input>
  </b-col>
  <b-col class="col-auto align-self-end">&nbsp;.&nbsp;</b-col>
  <b-col class="col-2 col-md-1">
    <b-form-input type="text" maxlength="3"></b-form-input>
  </b-col>
  <b-col class="col-auto align-self-end">&nbsp;.&nbsp;</b-col>
  <b-col class="col-2 col-md-1">
    <b-form-input type="text" maxlength="3"></b-form-input>
  </b-col>
  <b-col class="col-auto align-self-center">&nbsp;-&nbsp;</b-col>
  <b-col class="col-2 col-md-1">
    <b-form-input type="text" maxlength="4"></b-form-input>
  </b-col>
  <b-col class="col-12 col-sm-auto pt-2 pl-sm-3 pt-sm-0">
    <b-button class="btn-evm-orange">Button</b-button>
  </b-col>
</b-row>

对于 xs 设备上的两行布局：

<b-row class="no-gutters">
  <b-col class="col-3 col-sm-2 col-md-1">
    <b-form-input type="text" maxlength="3"></b-form-input>
  </b-col>
  <b-col class="col-auto align-self-end">&nbsp;.&nbsp;</b-col>
  <b-col class="col-3 col-sm-2 col-md-1">
    <b-form-input type="text" maxlength="3"></b-form-input>
  </b-col>
  <b-col class="col-auto align-self-end">&nbsp;.&nbsp;</b-col>
  <div class="w-100 pt-2 d-sm-none"></div><!-- this is a helper class -->
  <!-- see https://getbootstrap.com/docs/4.4/layout/grid/#column-breaks for info -->
  <b-col class="col-3 col-sm-2 col-md-1">
    <b-form-input type="text" maxlength="3"></b-form-input>
  </b-col>
  <b-col class="col-auto align-self-center">&nbsp;-&nbsp;</b-col>
  <b-col class="col-3 col-sm-2 col-md-1">
    <b-form-input type="text" maxlength="4"></b-form-input>
  </b-col>
  <b-col class="d-block d-sm-none col-auto align-self-center">
    &nbsp;&nbsp;&nbsp;
    <!-- this is just for symmetry -->
  </b-col>
  <b-col class="col-12 col-sm-auto pt-2 pl-sm-3 pt-sm-0">
    <b-button class="btn-evm-orange">Button</b-button>
  </b-col>
</b-row>

https://jsfiddle.net/Sirence/1rspht4u/9/

输入将从中型设备向上自动宽度。
对于 xs 和 sm 设备，它们将分成两行。
该按钮在 xs 和 sm 设备的新行中。
如果你想晚点休息，把 md 换成 sm。

bootstrap(-vue) 中具有响应式设计的小型输入字段

Small input fields with responsive design in bootstrap(-vue)

html

css

bootstrap-4

bootstrap-vue