Небольшие поля ввода с отзывчивым дизайном в bootstrap (- vue) - PullRequest
Новая
       1

Небольшие поля ввода с отзывчивым дизайном в bootstrap (- vue)

1 голос
/ 16 января 2020

Я пытаюсь создать форму ввода с небольшими полями и знаками между ними. enter image description here

В настоящее время это сделано с использованием смеси классов c HTML и Bootstrap - Vue. Как вы можете видеть на скриншоте. Оно работает. Но только на больших экранах. это не отзывчиво. На мобильном устройстве это выглядит так:

enter image description here

Последнее поле перекрывается кнопкой, и поля должны быть маленькими, чтобы видеть ввод.

Если я использую только 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 чисел. Вот скриншоты сравнения:

P C -View

enter image description here

Mobile- Вид

enter image description here

1 Ответ

1 голос
/ 16 января 2020

Если вам не нужна таблица, это способ получить отзывчивую форму, используя bootstrap отзывчивые классы col, а также некоторые служебные классы: 

  <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 везде, если вы хотите, чтобы разрыв был позже.

...