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 example

Answer 1

您可以将.btn-toolbar与.btn-group-justified一起使用以轻松实现（呈现方式稍有不同）：

enter image description here

<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

Answer 2

为什么不在锚类中添加“text-center”并执行以下操作：

.btn {
    height: 170px;
}

对于您遇到的身高问题。这是我选择的任意数字，但是当我将它打入你的例子时它就有用了。

希望有所帮助。

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

2 个答案: