Bootstrap 4 移動視圖：label 填充太多/輸入字段填充太少

Question

我有一個帶有 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>

在移動視圖中，label“密碼”的左側空間大於輸入字段的左側空間：

這有點丑陋。 如果沒有額外的 CSS 是否可以做得更好，或者它是 Bootstrap 的錯誤（或功能）？！

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

Answer 1

這不是一個錯誤，甚至不是引導程序的一個功能，它正在填充，所以這就是為什么它在筆記本電腦視圖中處於同一行時沒有問題當它將 go 移動視圖不在同一行時填充仍然是一個問題。 您可以將p-0 class 添加到label 。 當您使用它時，它不會沒有填充。

Answer 2

對我自己的注意：只需閱讀文檔。

參見https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form

所以更好的方法是：

<div class="container">
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="passwordField">Password</label>
    <div class="col-sm-4">
      <input type="password" class="form-control" id="passwordField"/>
    </div>
    <div class="col-sm-2">
      <button class="form-control my-2 my-sm-0">Login</button>
    </div>
  </div>
</div>

更新的 JSFiddle： https://jsfiddle.net/bvnqa58u/