Twitter Bootstrap按钮文本字换行

对于我的生活,我无法将这些twitter引导按钮以文本方式包装到多行,它们显示为如此。

我无法发布图片,所以这是它正在做的事情...

[这是butonton文本

我希望它看起来像

[这是]

[按钮文字]

<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/ - 您需要将其展开右列,以便面板彼此相邻。


试试这个:添加空格:正常; 到引导按钮的样式定义,或者您可以用下面的代码替换您显示的代码

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

我已经在这里更新了你的小提琴,以展示它是如何出现的。


你可以简单地添加这个类。

.btn{
    white-space:normal !important;
    word-wrap: break-word; 
}
链接地址: http://www.djcxy.com/p/36515.html

上一篇: Twitter Bootstrap Button Text Word Wrap

下一篇: How to make button look like a link?