twitter-bootstrap Bootstrap 3 - 填充网格列的链接按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21820669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Link-Buttons that fill Grid Columns
提问by BVartin
I am trying to use Bootstrap to quickly whip up a small internal site and I'm having some issues with a specific layout on it's home page.
我正在尝试使用 Bootstrap 快速创建一个小型内部站点，但我在其主页上的特定布局方面遇到了一些问题。
I have two rows and the first row is filled with link anchors dressed up as buttons. I want them all to be the same width and height, word wrap their contents and have a strong'title' text with summary text, all text vertically aligned to the middle of the button.
我有两行，第一行装满了装扮成按钮的链接锚点。我希望它们都具有相同的宽度和高度，自动换行它们的内容并有一个strong带有摘要文本的“标题”文本，所有文本垂直对齐到按钮的中间。
I've achieved fixed width buttons and word wrap but I can't work out where to go from here to get them all the same height and then, of course, vertically align that text to the middle. I'm sure that line break element isn't helping things either.
我已经实现了固定宽度的按钮和自动换行，但我不知道从这里到哪里才能使它们具有相同的高度，然后，当然，将该文本垂直对齐到中间。我确信换行元素也无济于事。
HTML
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
CSS
.btn-fill {
width: 100%;
white-space: normal;
}
I have a Bootply examplehere
我在这里有一个Bootply 示例
回答by zessx
You could use .btn-toolbarwith .btn-group-justifiedto make it easily (the rendering differs a little bit) :
您可以使用.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;
}
回答by Alex Marple
Why not add "text-center" to the anchor class and do something like:
为什么不将“text-center”添加到锚类并执行以下操作：
.btn {
height: 170px;
}
For the height problem you're running into. That's an arbitrary number I picked but it worked when I punched it into your example.
对于您遇到的身高问题。这是我选择的任意数字，但是当我将它输入到您的示例中时它起作用了。
Hope that helps.
希望有帮助。
