Question

我希望我的div col-md-9的高度与我的第一个div col-md-3内容中的内容相同。

我也希望我的div col-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

你在寻找这样的结果吗？

Codepen：link

String

Answer 2

你所要做的就是用类＆＃34; row＆＃34;更改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 3

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

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

Answer 4

问题是使用h-100时按钮的高度为100％，解决方案是将表单元素也设置为100％。

所以它看起来像这样：

@using(Html.BeginForm("Action","Controller", FormMethod.Post, new { @class = "h-100" }) {
  <button class="h-100">Button</button> 
}

使用Bootstrap按钮填充div高度

4 个答案: