防止文本换行到下一行。

时间:2022-01-01 22:19:38

I am newbie in Twitter Bootstrap. It is a very simple question.

我是Twitter的新手。这是一个非常简单的问题。

Here is the image:

这里是图片:

防止文本换行到下一行。

And here is my Code:

这是我的密码:

<div class="col-md-8 col-xs-6 col-sm-6  placeholders">
  <p id="people-things" class="text-center"><a href="#">PEOPLE-THINGS RECOMENDATION</a></p>
</div>

Problem: I want to put the Recomendation text in one line other then going in next line.

问题:我想把Recomendation文本放在另一行,然后放到下一行。

Infos: I had tried every grid in but still couldn't sort it out.

Infos:我试过了所有的网格,但还是无法解决。

2 个解决方案

#1


10  

You have to make smaller font-size on .people-things or add this CSS:

你必须在。people-things上创建更小的字体大小,或者添加这个CSS:

.people-things { white-space: nowrap; }

Which is making .people-things to show on one line.

这就是在一条线上展示。人物。

#2


0  

The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.

上面的解决方案是可行的,但是bootstrap网格类应该是自己使用的,并且您不需要在它上面使用任何自定义样式。尝试重新排列你的网格结构,使它在< coll -x -6>之前应用< coll -sm-6>。这将允许网格单元格中有更多的空间来容纳文本。此外,您可能不需要三层网格嵌套。您可以使用:< coll -md-8>< coll -sm-8>,看看是否有效。

#1


10  

You have to make smaller font-size on .people-things or add this CSS:

你必须在。people-things上创建更小的字体大小,或者添加这个CSS:

.people-things { white-space: nowrap; }

Which is making .people-things to show on one line.

这就是在一条线上展示。人物。

#2


0  

The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.

上面的解决方案是可行的,但是bootstrap网格类应该是自己使用的,并且您不需要在它上面使用任何自定义样式。尝试重新排列你的网格结构,使它在< coll -x -6>之前应用< coll -sm-6>。这将允许网格单元格中有更多的空间来容纳文本。此外,您可能不需要三层网格嵌套。您可以使用:< coll -md-8>< coll -sm-8>,看看是否有效。

相关文章