html - Bootstrap 网格中的小断点问题

Question

我的 Bootstrap Grid 中有多个断点。小型和中型。但是小断点不起作用，我看不出有什么区别。

<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 断点，我在这里有相同的效果。我能做什么？

这里有什么问题？

That is ok! (medium)

That is the problem (small resolution)

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;
}