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

Question

我正在尝试使用Bootstrap快速启动一个小型内部站点,我在其主页上遇到了一些特定布局的问题.

我有两行,第一行填充了链接锚,打扮成按钮.我希望它们都具有相同的宽度和高度,自动换行内容并使用strong带有摘要文本的"标题"文本,所有文本垂直对齐到按钮的中间.

我已经实现了固定宽度按钮和自动换行,但是我无法找到从这里到达的位置以获得相同的高度,然后,当然,将文本垂直对齐到中间.我确信换行元素也没有帮助.

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

Answer 1

您可以使用.btn-toolbarwith .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