196

私の人生では、これらのTwitterブートストラップボタンを複数の行にテキストを折り返すことができません。

画像を投稿できないので、これがやっていることです...

[これがブ] tton テキスト

のように見せたい

[これは ]

[ボタンテキスト]

<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;たが、違いはありません。

編集。JSFiddle http://jsfiddle.net/TTKtb/ - パネルが互いに隣り合うように、右側の列を展開する必要があります。

4

4 に答える 4

374

これを試してください: add white-space: normal; ブートストラップボタンのスタイル定義に追加するか、表示したコードを以下のコードに置き換えることができます

<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>

ここでフィドルを更新して、それがどのように表示されるかを示しました。

于 2013-09-25T04:34:51.193 に答える