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

Question

我的问题是，当浏览器宽度变小时，文本开始显示为两行。

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

我尝试更改：

<div class="row">

到

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

但结果相同。

我的代码片段：

<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

Answer 1

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

Answer 2

将 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）开始工作。

Answer 3

就像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/

干杯。

Answer 4

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

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

Text appears in two lines when browser width gets smaller

html

css

styles

twitter-bootstrap