web-dev-qa-db-ja.com

Bootstrap 3レスポンシブデザインでテキストの折り返しを防止する

連続したdivで構成されるコントロールバーを持つビューアがあります。他の項目には既にテキストの上にFAアイコンが付いているため、画面サイズに問題はありませんが、より高いレベルの制御を持つ2つのボタンを区別してビューアー内のコンテンツを切り替えます。以下に示すようにレイアウトされています。

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next

これがiPhoneのような小さな画面に表示されると、アイコンがテキスト上を移動するので、代わりにその横に留まるようにします。その理由は、他のボタンがその下のアイコンと並んでいるため、見栄えの悪いUIであるためです。

Previous<i class="fa fa-toggle-left lg"></i>

それらがラッピングしないようにする方法に関するオプションはありますか？

csstwitter-bootstraptwitter-bootstrap-3font-awesomeword-wrap
53
kylebellamy

<span class="text-nowrap">で囲みます。クラス.text-nowrapは Bootstrapのテキスト配置 ヘルパークラスの1つで、以下で構成されます。

.text-nowrap {
    white-space: nowrap;
}

これにより、アイコンとテキストが同じ行にとどまります。

125
ckuijjer