web-dev-qa-db-ja.com

bootstrap 3でレスポンシブボタンを取得する方法

bootstrap 3を使用していますが、次のHTMLがあります。

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

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

csstwitter-bootstrapbuttontwitter-bootstrap-3
50
PropertyWebBuilder

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

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

http://jsfiddle.net/ADewB/

83
MattDiamant

これにはすでに顕著な答えがありますが、改善されていると感じています。

マークされた答えは少し誤解を招くです。彼はボタンに幅を設定しましたが、これは必要ではなく、幅を設定しても「応答しません」。彼の弁護のために、彼はその下のコメントで、幅は必要ではなく、単なる例に言及している。

ここで言及されていないことの1つは、単語がWordの途中で途切れてめちゃくちゃになる可能性があることです。

私の解決策は、単語間の休憩を強制する、ニースワードラップです。

.btn-responsive {
    white-space: normal !important;
    Word-wrap: break-Word;
}

<a href="#" class="btn btn-primary btn-responsive">Click Here</a>
29
Wade

別のアプローチとして、@ mediaクエリを使用して、さまざまなビューポート幅でボタンをスケーリングする方法があります。

デモ： http://bootply.com/93706

17
Zim

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

.btn {font-size: 3vw;}

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

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

4
MartySK
<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

自動応答にbtn-blockを使用できます。

2
Priyanko