如何在引导程序中对齐标签?

我刚刚开始使用Bootstrap(实际上是BootstrapVue),但我不知道垂直对齐标签的正确方法是什么。在进行一些flex / groid实验之前,我想确保没有内置的解决方案。

具体来说,代码

<template>
    <b-container class="bv-example-row" fluid>
        <b-row>
            <b-col sm="2">
                <label for="input-large">Title:</label>
            </b-col>
            <b-col sm="10">
                <b-form-input id="input-large" size="lg" placeholder="" v-model="incident.title"></b-form-input>
            </b-col>
        </b-row>
    </b-container>
</template>

产生此输出,其中“标题:”未与输入框垂直对齐。

如何在引导程序中对齐标签?

这是我应该尝试纠正自己的东西(使用来自flex / grid的对齐技术),还是由Bootstrap处理?

why521jay 回答:如何在引导程序中对齐标签?

摘自Bootstrap Vue文档:

<b-form-group label-cols="4" label-cols-lg="2" label="Title" label-for="input-default" label-align="right">
  <b-form-input id="input-default"></b-form-input>
</b-form-group>

您还可以为其他断点定义其他类。

,

最好使用<b-form-group>,但也可以使用align-v的{​​{1}}道具

<b-row>
本文链接:https://www.f2er.com/3094926.html

大家都在问