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％所需的高度。