时间戳

首页 > 解决方案 > Bootstrap 4移动视图：标签有太多填充/输入字段有太少填充

html - Bootstrap 4移动视图：标签有太多填充/输入字段有太少填充

问题描述

我有一个带有 Bootstrap 网格类的简单密码字段：

<div class="container">
  <div class="row">
    <label class="col-sm-2" for="passwordField">Password</label>
    <input class="col-sm-3" id="passwordField" type="password" v-model="password"/>
    <button class="col-sm-3">Login</button>
  </div>
</div>

在移动视图中，标签“密码”的左侧空间大于输入字段的左侧空间： 在此处输入图像描述

这有点丑。没有额外的 CSS 是否可以做得更好，或者它是 Bootstrap 的一个错误（或功能）？！

见https://jsfiddle.net/0tkco9ws/1/

标签： htmlcssbootstrap-4

解决方案

这不是一个错误，甚至不是引导程序的一个功能，它正在使用填充，所以这就是为什么它在笔记本电脑视图的同一行中没有问题，当它转到移动视图时不在同一行，填充仍然是一个问题。您可以将p-0类添加到label. 当你将使用它时，它不会不需要填充。

推荐阅读