2015-11-04 2 views
4

Я новичок в Twitter Bootstrap. Это очень простой вопрос.Запретить перенос текста на следующую строку

Вот изображение:

Paragraph

А вот мой Код:

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

Проблема: Я хочу поставить Recomendation текст в одной строке другой, то происходит в следующей строке.

Информация: Я пробовал каждую сетку, но все еще не мог разобраться.

+0

Если вы можете создать демо-код с помощью кода, это будет хорошо. –

ответ

10

Вы должны сделать меньше font-size на .people-things или добавить этот CSS:

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

Который делает .people-things, чтобы показать на одной линии.

+1

Спасибо, человек Ты спас мой день. ! и не могли бы вы рассказать мне, где вы узнали бутстрап, а затем его официальную документацию? –

+0

'white-space: nowrap' - это просто простой CSS, а не что-то от бутстрапа. Очень хорошая серия для изучения CSS: «30 дней для изучения HTML и CSS» - http://webdesign.tutsplus.com/courses/30-days-to-learn-html-css Также, если мой пост помог вам, пожалуйста, одобрить его , –

+1

Спасибо, @Viktor, если вы думаете, что мой пост будет помогать кому-то, пожалуйста, проголосуйте за него :) –

0

Решение выше работает, но классы сетки начальной загрузки должны быть идеально использованы сами по себе, и вам не нужны никакие пользовательские стили поверх него.
Попробуйте перестроить структуру сетки, чтобы применить <col-sm-6> до <col-xs-6>. Это позволит больше места в ячейке сетки соответствовать тексту. Также вам может не понадобиться три уровня гнездования сетки. Вы можете использовать: <col-md-8><col-sm-8> и посмотреть, работает ли это.

+0

Спасибо, но используя col-sm-6 перед col-xs-6, в чем разница? xs оценивается сначала независимо от позиции. –