Html 每当我在文本中添加空格时，列文本将移动到新行

我刚刚了解了bootstrap及其网格系统。我会尝试用图片来解释我的问题。这就是我想要实现的目标：

但是，每当我使用caps时，空间会将时间移动到新行中：

我使用的代码是：

<div class="container-fluid" style="background-color:grey; height:44px;">
      <style> p{
        margin-top:10px;
        color:white;
        display:inline-block;
      }
      </style>
      <div class="row">

          <p class="col-xs-1 col-sm-1 col-md-1 col-lg-1">Welcome</p>
          <p class="col-xs-1 col-sm-1 col-md-1 col-lg-10>"><span 
       id="datetime"></span></p>

<script>
var dt = new Date();
var show=dt.getMinutes();
if(show<10)show="0"+show;
document.getElementById("datetime").innerHTML ="ATHENS "+ dt.getHours() + 
    ":" + show;
</script>


      </div>

      </div>

p{
边缘顶部：10px；
颜色：白色；
显示：内联块；
}
欢迎光临


var dt=新日期（）；
var show=dt.getMinutes（）；
如果（显示<代码>
欢迎光临

这应该可以解决您的问题。您可能希望更多地使用引导列大小，以获得您喜欢的大小。如果您不希望将其换行，也可以在

标记上使用

空白：no wrap