Link 按钮容器的全高 Bootstrap

Question

我在强制 link 占据其父容器的全高时遇到问题。

这是我的代码 Fiddle：http://jsfiddle.net/z2ua5g4j/

a > span.button-single {
    font-size: 30px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    margin-left: 0px;
}

.box {
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    height: 100%;
}

.box h1 {
    color: #667477;
    font-size: 24px;
    margin-left: 20px;
}

.box p {
    color: #b1b1b1;
    font-size: 13px;
    margin-left: 20px;  
    margin-bottom: 20px;  
}

.box a.button {
    width: 95px;
    background-color: #b4b4b4;
    margin-right:-1px;
    color: #fff;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    float: right;
    height: 100%;
    display: block;
}

.box a.button:hover {
    text-decoration: none;
    background-color: #a7a7a7;
}

基本上，我想让灰色按钮（在右边）占据盒子容器的整个高度。在撰写本文时，我已尝试将 link 设置为显示块并将其高度设置为 100%，但无济于事。

有什么想法吗？

Answer 1

我将框更改为 100px，并将按钮的父元素设置为 100% 高度

但是，您可能仍想查看 http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm 以了解 height:100%; 与 width:100%; 的不同之处。我猜你相信他们的工作原理是一样的。

@import url("http://getbootstrap.com/dist/css/bootstrap.min.css");

a > span.button-single {
    font-size: 30px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    margin-left: 0px;
}

.box {
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    height: 100px;
}

.box h1 {
    color: #667477;
    font-size: 24px;
    margin-left: 20px;
}

.box p {
    color: #b1b1b1;
    font-size: 13px;
    margin-left: 20px;  
    margin-bottom: 20px;  
}

.box a.button {
    width: 95px;
    background-color: #b4b4b4;
    margin-right:-1px;
    color: #fff;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    float: right;
    height: 100%;
    display: block;
}

.box a.button:hover {
    text-decoration: none;
    background-color: #a7a7a7;
}

.row{
 height: 100%;   
}

<div class="box">
    <div class="row">
        <div class="col-sm-10">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum purus ut pretium ultricies. Cras pulvinar tincidunt lorem, ut posuere risus mollis in. Fusce pharetra urna nec sagittis suscipit.</p>
        </div>
        <div class="col-sm-2" style="height:100%;">
            <a href="#" class="button"><span class="button-single glyphicon glyphicon-plus-sign"></span> More<br/>Details</a>
        </div>
    </div>
</div>

Answer 2

只需使用 btn-block class 而不是乱用 div 高度，像这样：

<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>

Link 按钮容器的全高 Bootstrap

Link button full height of container Bootstrap

css

twitter-bootstrap