使用引导带填充按钮的div高度

Question

我希望我的div -md-9的高度和我的第一个div -md-3的内容一样高。

我也希望我的div -md-9的按钮在里面的高度与col-md-3的内容一样高。

我希望按钮上的文字也能填满按钮。

我怎样才能做到这一点？

<div class="row" style="height:300px;">
    <div class="col-md-3">
        <div class="thumbnail">
            <a href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                <img src="@(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
            </a>

            <div class="caption">
                <p>Run the Timer App on your computer to keep track of your time.</p>
                <a class="btn btn-primary" href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                    <span class="glyphicon glyphicon-download"></span>&nbsp;Download
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9" style="height:300px; background: #f0e68c">

        <div class="thumbnail" style="width:100%; height:300px">
            <a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                <span class="glyphicon glyphicon-share"> LIRA</span>
            </a>
        </div>
    </div>
</div>

Answer 1

您所要做的就是将类"row“的div更改为您想要的高度。

<div class="row" style="height:300px;">
    <div class="col-md-3" style="height:100%">
        <div class="thumbnail"  style="width:100%; height:100%">
            <a href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                <img src="@(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
            </a>

            <div class="caption">
                <p>Run the Timer App on your computer to keep track of your time.</p>
                <a class="btn btn-primary" href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                    <span class="glyphicon glyphicon-download"></span>&nbsp;Download
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9" style=" background: #f0e68c;height:100%">

        <div class="thumbnail" style="width:100%; height:100%;">
            <a class="btn btn-primary" style="" href="@(Url.Content('~/ProjectTimer/LITL.DesktopTimer.application'))">
                <span class="glyphicon glyphicon-share"> LIRA</span>
            </a>
        </div>
    </div>
</div>

Answer 2

你在找这样的结果吗？

Codepen：链接

 <div class="row" style="height:300px;">
    <div class="col-md-3">
        <div class="thumbnail">
            <a href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))" >
            </a>
            <div class="caption" style="height:300px;">
                <p>Run the Timer App on your computer to keep track of your time.</p>
                <a class="btn btn-primary" href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                    <span class="glyphicon glyphicon-download"></span>&nbsp;Download
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9" style="height:300px; background: #f0e68c">
        <div class="thumbnail" style="width:100%; height:300px">
            <a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="@(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
                <span class="glyphicon glyphicon-share" style="font-size: 300px;">LIRA</span>
            </a>
        </div>
    </div>
</div>

Answer 3

只需使用btn-block类，如下所示：

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