btn-group-justified文本包装

Question

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

我正在使用bootstrap，以允许很好的RWD。我正在尝试使用.btn-group-justified。问题是某些按钮有大量文本，因为内容已经提供给我，所以无法更改。因此，文本溢出到下一个按钮，而不是仅包装到第二行文本，从而使按钮高两倍，ish。

目前我的代码是

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
    			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按钮：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在阅读了与其他成员的讨论后，我调整了css，使按钮占据了所需高度的100％。