包含相同字符数的行根据屏幕大小而表现不同

Question

使用bootstrap 4我开辟了一个网站，我注意到包含相同数量字符的不同字符串的行为彼此不同，我想知道为什么以及是否有修复这一点。
一张图片胜过千言万语，所以这里有截图：

以下是我使用的代码：

<div class="form-group row justify-content-center">
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Sat. December 1</b>
        <p class="form-date-french">Sam. 1 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Sun. December 2</b>
        <p class="form-date-french">Dim. 2 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Mon. December 3</b>
        <p class="form-date-french">Lun. 3 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Tue. December 4</b>
        <p class="form-date-french">Mar. 4 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Wed. December 5</b>
        <p class="form-date-french">Mer. 5 Décembre</p>
    </div>
    <div class="col-sm-2 form-check-date">
        <input class="" value="" id="defaultCheck1" type="checkbox">
        <br>
        <b class="form-date-english">Thu. December 6</b>
        <p class="form-date-french">Jeu. 6 Décembre</p>
    </div>
</div>

这里是自定义CSS类：

.form-check-date{
text-align: center;
}
.form-date-english{
color: #676767;
font-size: 0.8em;
}
.form-date-french{
color: black;
font-size: 0.7em;
}

非常感谢你的帮助

Answer 1

看起来这是因为M和W比其他字母宽一点。

一种选择就是接受它 - 这就是文本如何自然流动而且看起来不会破碎。

或者，如果您真的希望在不同的日子同时进行换行，您可以尝试使用不间断的空格（ ）替换日期编号和月份之间的空格，或者将它们包含在内在span white-space: no-wrap。

Answer 2

这不是代码，而是字符宽度不同的事实。