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

这是什么问题？

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

Answer 2

请在父div中添加“ row”类。检查以下内容：

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

Bootstrap网格中的小断点问题

2 个答案: