时间戳

首页 > 解决方案 > 包含相同数量字符的行根据屏幕大小表现不同

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

问题描述

使用引导程序 4 我正在开发一个网站，我注意到包含相同数量字符的不同字符串的行为彼此不同，我想知道为什么以及是否有解决方法。
一张图片值一千字，所以这里是截图：
图 1

图 2

图 3

这是我正在使用的代码：

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

非常感谢你的帮助

标签： htmlcssbootstrap-4

解决方案

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

一种选择是接受它——这是文本自然流动的方式，而且看起来没有损坏。

或者，如果您真的想同时换行不同的日子，您可以尝试用不间断空格 ( &nbsp;) 替换天数和月份之间的空格，或者将它们括在一个spanwith 中white-space: no-wrap。

推荐阅读