html - Bootstrap 3 - 填充网格列的链接按钮

Question

我正在尝试使用 Bootstrap 快速创建一个小型内部网站，但我在主页上的特定布局上遇到了一些问题。

我有两行，第一行是装扮成按钮的链接 anchor 。我希望它们都具有相同的宽度和高度，自动换行它们的内容并有一个带有摘要文本的 strong 'title' 文本，所有文本垂直对齐到按钮的中间。

我已经实现了固定宽度的按钮和自动换行，但我无法弄清楚从这里到哪里才能使它们的高度都相同，然后当然是将该文本垂直对齐到中间。我确信换行符元素也无济于事。

HTML

<div class="container">
  <div class="row">
    <div class="col-md-2">
          <a href="#" class="btn btn-default btn-lg btn-fill" role="button">
            <strong>Button A</strong><br/>
            <span>Long Summary That's Annoyingly Long</span>
          </a>
        </div>
    <div class="col-md-2">
      <a href="#" class="btn btn-default btn-lg btn-fill" role="button">
        <strong>Button B</strong><br>
        <span>Very Long Summary</span>
      </a>
    </div>
  </div>
</div>

CSS

.btn-fill {
  width: 100%;
  white-space: normal;
}

我有一个 Bootply example这里

Answer 1

您可以将 .btn-toolbar 与 .btn-group-justified 一起使用以使其更容易(渲染略有不同):

<div class="container">
  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
      <a href="#" class="btn btn-default" role="button">
        <strong>Part A</strong><br>
        <span>Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part B</strong><br>
        <span>Very Long Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part D</strong><br>
        <span>Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part E</strong><br>
        <span>Long Summary That's Annoyingly Long</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part F</strong><br>
        <span>Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part G</strong><br>
        <span>Very Long Summary</span>
      </a>
    </div>
  </div>
</div>

.btn-group-fill-height .btn { 
  white-space: normal;
}

Bootply