ブートストラップを使用したボタンの塗りつぶしの高さ

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

あなたがしなければならないのは、あなたが望む高さにクラス「行」と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：link

<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>