btn-group-justified text wrapping [重复]

Question

我正在处理一个项目，我需要几个按钮，这很简单，但我希望它看起来不错，显然不是那么容易。

我正在使用引导程序，以实现良好的 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：

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% 的高度。