bootstrap-vue 中的布局，用于不同行上的标签输入

Question

使用 bootstrap 当我需要更改 label/input 的布局时，我使用下一个代码取决于设备：

<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>

并根据设备改变 block_2columns_md 柔性方向我在不同的行上放置了小型设备标签输入。现在我使用 bootstrap-vue 并想知道哪些元素 bootstrap-vue 有这样的块，因为我想如果我使用 bootstrap-vue ...

则首选使用 bootstrap-vue

"bootstrap-vue": "^2.3.0",

谢谢！

Answer 1

听起来你想要的是其中的 Form Group component. More specifically the Horizontal Layout 部分。

该组件有 label-cols-{breakpoint} 道具来定义标签在给定断点处应使用多少 space。它使用与正常 bootstrap 使用相同的 12 网格系统。

因此，如果您希望标签在某个断点处使用整行（在输入上方），请将 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>

bootstrap-vue 中的布局，用于不同行上的标签输入

Layout in bootstrap-vue for label input on different rows

bootstrap-vue