Keep Text From Wrapping in Bootstrap 3 Responsive Design
I have a viewer with a control bar consisting of divs in a row. The other items have the FA icon already over the text for it so there is no issue with screen size but in order to differentiate two of the buttons that have higher level control to switch the content in the viewer. They are laid out as shown below:
<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next
When this is shown on a small screen like an iPhone, the icon moves over the text and I'd like it to stay next to it instead. The reason being that the other button then lines up with the icon below it which is bad looking UI.
Previous<i class="fa fa-toggle-left lg"></i>
Any options as to how to keep them from wrapping?
Surround it with a <span class="text-nowrap">. The class .text-nowrap is one of Bootstrap's text alignment helper classes and consists of:
.text-nowrap {
white-space: nowrap;
}
which makes the icon and text stay on the same line.
ReferenceURL : https://stackoverflow.com/questions/27986391/keep-text-from-wrapping-in-bootstrap-3-responsive-design
'programing' 카테고리의 다른 글
| Cannot checkout, file is unmerged (0) | 2021.01.17 |
|---|---|
| Conditional with statement in Python (0) | 2021.01.17 |
| Are doubles faster than floats in C#? (0) | 2021.01.17 |
| xna에서 창 / 화면 크기를 어떻게 설정합니까? (0) | 2021.01.17 |
| PHP에서 가중치로 무작위 결과를 생성합니까? (0) | 2021.01.16 |