当浏览器宽度变小时，文本显示为两行答案

【问题标题】：Text appears in two lines when browser width gets smaller当浏览器宽度变小时，文本显示为两行
【发布时间】：2017-06-12 16:56:43
【问题描述】：

我的问题是当浏览器宽度变小时，文本开始出现在两行中。

我正在使用引导网格系统...所以不应该在网格内调整文本吗？

我尝试过改变：

<div class="row">

到

<div class="row col-sm-12">

但结果相同。

我的代码sn-p：

<div class="row">
  <div class="col-sm-8">
    <p>Posted by admin on this this date</p>
  </div>
  <div class="col-sm-4">
    <p class="text-right"><a href="#">One comment</a></p>
  </div>
</div>

问题截图：

JSFiddle Demo

【问题讨论】：

标签： html twitter-bootstrap css styles

【解决方案1】：

将sm 更改为xs。

所以现在您的代码如下所示：

<div class="row">
    <div class="col-xs-8">
        <p>Posted by admin on this this date</p>
    </div>
    <div class="col-xs-4">
        <p class="text-right"><a href="#">One comment</a></p>
    </div>
</div>

你必须先阅读Bootstrap CSS documentation。明确指出.col-sm- 列前缀将从小型设备平板电脑的宽度（≥768px）开始起作用。

【讨论】：

【解决方案2】：

就像 Rizki 说的那样。你需要把 col-sm-4 和 col-sm-8 改成这个

<div class="row">
  <div class="col-xs-8">
    <p>
      Posted by admin on this this date</p>
  </div>
  <div class="col-xs-4">
    <p class="align-right"><a href="#">One comment</a></p>
  </div>
</div>

查看实际情况 -- https://jsfiddle.net/aLuv47bt/

干杯。

【讨论】：

【解决方案3】：

更改 col-sm tp col-xs 使其在一行中。这是代码。

<div class="row">
  <div class="col-xs-8">
    <p>Posted by admin on this this date</p>
  </div>
  <div class="col-xs-4">
    <p class="text-right"><a href="#">One comment</a></p>
  </div>
</div>

【讨论】：

【解决方案4】：

用white-space:nowrap简单解决这个问题

p {
 white-space:nowrap;
}

p {
  white-space:nowrap;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-sm-8">
    <p>
      Posted by admin on this this date</p>
  </div>
  <div class="col-sm-4">
    <p class="text-right"><a href="#">One comment</a></p>
  </div>
</div>

查看演示

https://jsfiddle.net/x9g2th82/4/

【讨论】：

似乎没有修复它