如何在Bootstrap卡组件的底部对齐页脚

时间：2016-03-11 05:59:10

标签： html css twitter-bootstrap

我正在尝试使用一些CSS而我正在使用Bootstrap和组件＆＃34;卡＆＃34;

当你把它们放在一个名为＆＃34; card-deck＆＃34;你可以把它们分组到同一个高度。但是当一个比另一个长时，卡片中的实际页脚本身不会与卡片的底部对齐。

有没有办法轻松将页脚强行放在较短的卡片上？

MY FIDDLE

＆＃13;
＆＃13; 
.row {
  padding-top: 50px;
}
＆＃13; 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="card-deck-wrapper">
      <div class="card-deck">
        <div class="card text-xs-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
        <div class="card text-xs-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada
              magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Donec sed
              odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：16)

使用position:absolute作为页脚

＆＃13;
＆＃13; 
.row {
  padding-top: 50px;
}
.card-footer{
position:absolute;
  bottom:0;
  width:100%;
}
.card-deck .card{
  padding-bottom:50px;
  }
＆＃13; 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="card-deck-wrapper">
      <div class="card-deck">
        <div class="card text-xs-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
        <div class="card text-xs-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada
              magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Donec sed
              odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：5)

我遇到了同样的问题，几天都找不到解决方案。然后我学会了flexbox。您可以通过更改

来解决它 
<div class="card">...</div>

到

<div class="card h-100 d-flex flex-column justify-content-between">...</div>

它适用于Bootstrap 4，我不知道其他版本。

答案 2 :(得分：-1)

或者仅使用正确的Bootstrap类card-body代替card-block 

.row {
  padding-top: 50px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="card-deck-wrapper">
      <div class="card-deck">
        <div class="card text-xs-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
        <div class="card text-xs-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada
              magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Donec sed
              odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题