html - Bootstrap-對齊按鈕到卡的底部




css twitter-bootstrap (4)

Flex是你的朋友

像這樣的東西將起到魔力： 

.flex-wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}


.flex-item {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}


.fill{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.btn{
  background:#069;
  padding:10px;
  color:#fff;
}
<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>$0</h2>
      <p>Some text ... ashd iaush diuhasd uhasd aiusdh iaush d haisduhaiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">SIGN UP</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">PRO</div>
    <div class="flex-item fill">
      <h2>$10</h2>
      <p>Some text ... ashd iaush uhasd aiusdh iaush d haisduhdiuhasd aiusdh iuhasd aiusdh iaush d haisduhaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">GET STARTED</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">ENTERPRISE</div>
    <div class="flex-item fill">
      <h2>$20</h2>
      <p>Some text ... ashd iaush diuhasd aiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">CONTACT</a>
    </div>
  </div>
  
</div>

我正在偷看其中一個使用 card-deck 和 card 類的Bootstrap示例（ 定價示例 ）。 我想知道如果其中一個列表的項目少於其他列表，那麼如何修復按鈕對齊。

我希望所有按鈕都垂直對齊（在每張卡的底部），但我無法找到一種方法。 我嘗試設置 .align-bottom 類以及將按鈕包裝在 <div class="align-text-bottom"> 。 我也從 這個問題中 嘗試了幾個 關於添加空間的 建議，但是仍然沒有成功（間距也應該是可變的，以便它填滿列表中的剩餘空間）。

包裝在 <div class="card-footer bg-white"> 並沒有產生所需的結果，因為它沒有對齊卡片底部的按鈕，而是在它周圍創建了某種邊框。

有沒有人有想法？

編輯： 這是一個類似於問題的 jsfiddle 。

你必須添加： 

<div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

這裡回答了 類似的問題。

只需將 align-self-end 類添加到項目以在底部對齊。

https://www.codeply.com/go/Fiorqv1Iz6 

     <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

默認情況下， card 顯示為：flex，但 card-body 不顯示。 因此，您需要將 d-flex flex-column 到 card-body 。 這將使flexbox對齊類工作。

另一種選擇是在按鈕上使用 mt-auto （自動上邊距），將其推到卡的底部。

根據jsfiddle鏈接的添加進行更新

您可以使用以下Bootstrap 4修飾符類：

  1. 將 d-flex 添加到 .card-body
  2. 將 flex-column 添加到 .card-body
  3. 將 mt-auto 添加到嵌入 .card-body

更新小提琴

有關Bootstrap 4的flexbox修改類的完整列表，請參閱 此頁面 。




html   css   twitter-bootstrap   bootstrap-4  


bootstrap-4