Question

我发现Safari中的行为很奇怪，无法弄清到底是怎么回事。

在Chrome中查看的我的布局：

但是在Safari中查看时，我得到以下信息：

出于某种奇怪的原因，我HTML的1.0部分已被放到新行。

更奇怪的是，如果我只更改“城市”一词中的一个字母，布局就会正确。

表单的相同部分，但我确实改变了一件事，那就是我将“城市”一词改为了“城市”：

事实上，我似乎可以用任何单词代替“城市”，但是当我使用“城市”一词时，标签突然占用了两行。因此，鉴于此，有一个简单的解决方法，就是只使用“镇”一词而不是“城市”一词，但是我仍然想知道这是否只是一个非常奇怪的错误，或者我是否错过了东西。

这到底是怎么回事？

我无法在堆栈溢出的代码段工具中重新创建此问题。

我正在使用Bootstrap 4，并且正在查看的HTML部分如下：

for

编辑回复评论

@Rdg用int代替空格确实可以修复布局。但是，为什么只在后面跟着“城市”一词而不是其他单词时才会发生这种情况（当然，我没有测试过英语中的每个单词，所以这与“城市”一词的确切宽度有关吗？）

@Geuis是的，我终于设法在Codepen中重新创建了它，这似乎与我使用的字体（“ Raleway”）和单词“ City”的确切宽度有关。 https://codepen.io/Redtama/pen/RdRpqX

@Richard Uie我不确定您所说的<small class="text-muted">(required)</small>是什么意思，但是对于宽度引起的包裹，我可以用更长的内容代替“城市”一词，而不会发生包裹。

带有较长标签文字的示例

Answer 1

我建议您在CSS中添加以下内容，以强制文本成为内联元素：

.text-muted {
  display: inline-block;
}