防止文本换行到下一行

Question

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

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.

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

Answer 1

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

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

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

Answer 2

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.