どうしても、これらの Twitter Bootstrap ボタンのテキストを複数行に折り返すことができません。次のようになります。
画像を投稿できないので、こうなります…
[これはボタンのテキストです
こんな感じにしたい
[これは ]
[ボタンテキスト]
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
</div>
</div>
どのような助けでも大歓迎です。
編集。追加してみましたword-wrap:break-word;が、違いはありませんでした。
編集。JSFiddlehttp://jsfiddle.net/TTKtb/- パネルが隣り合うように、右側の列を拡張する必要があります。
ベストアンサー1
これを試してください：追加空白: 通常;Bootstrapボタンのスタイル定義に追加するか、表示されたコードを以下のコードに置き換えることができます。
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
</div>
</div>
フィドルを更新しましたここそれがどのように出てくるかを示します。