Bootstrap網格中的小斷點問題

Question

我的Bootstrap網格中有多個斷點。 中小型。 但小斷點不起作用，我沒有看到任何差異。

<div class="form-row">              
              <div class="col-sm-3 col-md-2 form-group">
              <b>Geburtsname:</b>
              </div>
              <div class="col-sm-3 col-md-4 form-group">
              Mustermann
              </div>
              <div class="col-sm-3 col-md-2 form-group ">
              <b>Staatsangehörigkeit:</b>
              </div>
              <div class="col-sm-3 col-md-4 form-group">
             deutsch
              </div>
              </div>

我沒有在小型設備上獲得想要的效果。 沒有sm斷點，我在這里有相同的效果。 我能做什么？

這里有什么問題？

那沒問題！ （介質）

那就是問題（小分辨率）

Answer 1

這里的問題是Staatsangehörigkeit這個單詞太長了，無法容納在sm大小提供的列寬中。

如果您使用的是最新的Bootstrap v4.3，則可以使用實用程序類.text-break （請參閱： Bootstrap Docs ）並將其應用於發生問題的列。 它將把這個詞打破到第二行。

<div class="col-sm-3 col-md-2 form-group text-break">
    <b>Staatsangehörigkeit:</b>
</div>

如果使用的是較舊版本的Bootstrap，則可以在自定義CSS中創建相同的類，然后應用。

.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

Answer 2

請在父div中添加一個“行”類。 檢查如下：

<div class="form-row row">              
    <div class="col-sm-3 col-md-2 form-group">
        <b>Geburtsname:</b>
    </div>
    <div class="col-sm-3 col-md-4 form-group">
        Mustermann
    </div>
    <div class="col-sm-3 col-md-2 form-group ">
        <b>Staatsangehörigkeit:</b>
    </div>
    <div class="col-sm-3 col-md-4 form-group">
        deutsch
    </div>
</div>