bootstrap-4 - 如何在引导程序中对齐标签?
问题描述
我刚开始使用 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 处理?
解决方案
来自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>
您还可以为不同的断点定义其他类。
推荐阅读
- javascript - 根据查询字符串隐藏按钮
- python - 如何将 on_message 与 client.command 一起使用?
- javascript - 为什么 CURL 工作时 Axios 出现错误 415?
- azure - 卡夫卡与 SignalR
- python - 如何强制应用程序停止,直到操作完成?
- php - Wordpress:将具有受保护属性的对象保存到瞬态将失败
- sql - 组合 INSERT SELECT Oracle-Query 不起作用
- xml - 如何使用 Java Bean 类验证传入的无效 XML @RequestBody
- java - 使用 docker-java 时出现 java.lang.ClassNotFoundException
- angular - forkJoin 未触发带有片段的 graphql 查询