Макет в bootstrap - vue для ввода метки в разных строках - PullRequest
Новая
       13

Макет в bootstrap - vue для ввода метки в разных строках

0 голосов
/ 13 февраля 2020

Работа с bootstrap Я использую следующий код, когда мне нужно изменить расположение метки / ввода в зависимости от устройства: 

<fieldset class="bordered text-muted p-0 m-0 mb-4">
    <legend class="bordered">Filters</legend>

    <dl class="block_2columns_md m-0 p-2">
        <dt class="key_values_rows_label_13">
            <label class="col-form-label" for="filter_title">
                By title
            </label>
        </dt>
        <dd class="key_values_rows_value_13">
            <input style="flex: 1 0" name="filter_title" id="filter_title" class="form-control" type="text" value="" v-model="filter_title">
        </dd>
    </dl>

и изменение в flex-direction block_2columns_md в зависимости от устройства, которое я устанавливаю на небольшие устройства ввод метки в разных строках. Теперь я работаю с bootstrap - vue и задаюсь вопросом, какие элементы bootstrap - vue имеют для таких блоков, так как я предполагаю, что использование bootstrap - vue предпочтительнее, если я использую bootstrap - vue ... 

"bootstrap-vue": "^2.3.0",

Спасибо!

1 Ответ

2 голосов
/ 13 февраля 2020

Звучит так, как вам нужен компонент Form Group . Точнее говоря, Горизонтальный макет его часть.

Компонент имеет label-cols-{breakpoint} подпорок, чтобы определить, сколько места должно использовать метка в данной точке останова. Он использует ту же 12-сеточную систему, что и обычный bootstrap.

Так что, если вы хотите, чтобы метка использовала всю строку (выше входного) в определенной точке останова, добавьте label-cols-{breakpoint}="12" к form-group.

Фрагмент имеет метку выше на небольших мобильных устройствах, а на sm и выше он находится рядом со входом. 

new Vue({
  el: '#app'
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form-group label-cols="12" label-cols-sm="2" label="Default">
    <b-input></b-input>
  </b-form-group>
</div>
...