每当我在文本上添加空格时，列文本就会移到新行

Question

我刚刚了解了引导程序及其网格系统。我将尝试用图片解释我的问题。这就是我想要达到的目标：

但是，每当我使用大写字母时，空格就会将时间移动到新的一行：

我使用的代码：

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

Answer 1

<div class="container-fluid" style="background-color:grey; height:44px;">
    <div class="row">
        <p class="col-4 col-md-3 col-lg-1">Welcome</p>
        <p class="col-8 col-md-9 col-lg-11"><span id="datetime"></span></p>
    </div>
</div>

这应该可以解决您的问题。您可能需要更多有关引导列大小的信息，以使其完全符合您的要求。如果不想包装，也可以在white-space: no-wrap标签上使用<p>。

Learn about the Bootstrap Grid System

CodePen Solution Link