51

私はブートストラップ 3 を使用しており、次の html があります。

<div class="col-sm-2" >
    <a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>

小さな画面では、「Create New Board」というテキストが長すぎてボタンに収まりません。テキストを別の行に折り返し、テキストに合わせてボタンの高さを増やしたいと思います。これを行う方法に関するヒントはありますか？

4

5 に答える 5

87

Bootstrap では、.btnクラスにwhite-space: nowrap;プロパティがあり、ボタンのテキストが折り返されないようにします。したがって、それを に設定しnormal、ボタンに を指定したwidth後、テキストが set を超える場合、テキストは次の行に折り返されますwidth。

#new-board-btn {
    white-space: normal;
}

http://jsfiddle.net/ADewB/

于 2013-10-09T22:58:50.987 に答える
4

場合によっては、相対的なフォント サイズの単位で font-size を変更すると非常に便利です。例えば：

.btn {font-size: 3vw;}

デモ: http://www.bootply.com/7VN5OCVhhF

1vw はビューポート幅の 1% です。詳細: http://www.sitepoint.com/new-css3-relative-font-size/

于 2016-02-17T21:15:05.793 に答える