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

Question

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

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

我尝试过改变：

<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

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

像里兹基说的那样。您需要将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 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>

Answer 4

使用white-space:nowrap

进行简单的修复

p {
 white-space:nowrap;
}

＆＃13;

＆＃13;

p {
  white-space:nowrap;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

查看演示

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