btn-group-justified文字环绕

Question

我有一个项目，我正在研究哪里需要有几个按钮，很简单，但我希望它看起来不错，不那么容易，显然。

我正在使用引导程序，以允许很好的RWD。我正在尝试使用.btn-group-justified。问题是一些按钮有大量的文本，这是不能改变的，因为内容已经提供给我。所以，文本溢出到下一个按钮中，而不是仅仅包裹到第二行文本，因此使按钮两倍高，是。

目前我的代码是

HTML

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 
<div class="container-fluid"> 
 
    <div class="btn-group btn-group-justified"> 
 
    <a href="S1A.php" class="btn-group"><button type="button" class="btn btn-primary ghost-button">Check the newspaper classifieds for affordable 
 
    \t \t \t pieces</button></a> 
 
    <a href="S1B.php" class="btn-group"><button type="button" class="btn btn-primary ghost-button">Check for garage sales within walking distance</button></a> 
 
    <a href="S1C.php" class="btn-group"><button type="button" class="btn btn-primary ghost-button">Do nothing</button></a> 
 
    </div> 
 
</div>

所以，我的问题是，有什么我可以做，以使文本换行在按钮内，？最后，屏幕尺寸足够小，以至于我使用媒体查询来使它们成为按钮，但我希​​望能够尽可能地使用按钮组。

Answer 1

你只需要重写white-space的按钮：

button.btn { 
 
    height: 100%; 
 
    white-space: normal !important; 
 
} 
 
a.btn-group{ 
 
height: 100%; 
 
} 
 

 
.btn-group{ 
 
display: table; 
 
height:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<div class="container-fluid"> 
 
    <div class="btn-group btn-group-justified"> 
 
    <a href="S1A.php" class="btn-group"><button type="button" class="btn btn-primary ghost-button">Check the newspaper classifieds for affordable pieces</button></a> 
 
    <a href="S1B.php" class="btn-group"><button type="button" class="btn btn-primary ghost-button">Check for garage sales within walking distance</button></a> 
 
    <a href="S1C.php" class="btn-group"><button type="button" class="btn btn-primary ghost-button">Do nothing</button></a> 
 
    </div> 
 
</div>

读你有没有和其他成员的讨论后，我调整了CSS，使按键占据100％所需的高度。