Bootstrap - nút căn chỉnh ở cuối thẻ

Question 1

Tôi đã xem qua một trong các ví dụ Bootstrap sử dụng các lớp card-deckvà card( Ví dụ về giá ). Tôi tự hỏi làm thế nào người ta có thể sửa chữa căn chỉnh nút nếu một trong các danh sách có ít mục hơn các danh sách khác.

Tôi muốn tất cả các nút được căn chỉnh theo chiều dọc (ở cuối mỗi thẻ) nhưng tôi không thể tìm ra cách làm điều này. Tôi đã thử thiết lập .align-bottomlớp cũng như gói nút vào <div class="align-text-bottom">. Tôi cũng đã thử một số đề xuất từ câu hỏi này về việc thêm không gian nhưng vẫn không thành công (khoảng cách cũng phải thay đổi để nó lấp đầy không gian còn lại từ danh sách).

Việc gói <div class="card-footer bg-white">lại cũng không mang lại kết quả mong muốn vì nó không căn chỉnh nút ở dưới cùng của thẻ và nó tạo ra một số loại đường viền xung quanh nó.

Có ai có ý tưởng gì không?

Chỉnh sửa: Đây là một jsfiddle tương tự như vấn đề.

Question 2

Bạn có thể sử dụng các lớp bổ trợ Bootstrap 4 sau:

Thêm d-flexvào.card-body
Thêm flex-columnvào.card-body
Thêm mt-autovào .btnlồng trong.card-body

vĩ cầm

Tham khảo trang này để biết danh sách đầy đủ các lớp sửa đổi flexbox cho Bootstrap 4.

Question 3

Một câu hỏi tương tự đã được trả lời ở đây .

Chỉ cần thêm align-self-endlớp vào mục để căn chỉnh ở dưới cùng.

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>

Theo mặc định, cardlà display: flex, nhưng card-bodykhông phải. Bởi vì điều này bạn cần phải thêm d-flex flex-columnvào card-body. Điều này sẽ làm cho các lớp căn chỉnh flexbox hoạt động.

Một tùy chọn khác là sử dụng mt-auto(lề trên tự động) trên nút sẽ đẩy nó xuống dưới cùng của Thẻ.

Question 4

Đặt .card-bodydiv thành display:flexvà flex-direction:column.

Sau đó, đưa ra các nút margin-top:auto.

Tôi tưởng tượng có các lớp trợ giúp Bootstrap cho việc này.

.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

Mở rộng đoạn mã

Question 5

Bạn phải thêm:

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

Question 6

Sử dụng footer, nó đã có mọi thứ thiết lập cho bạn.

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Title goes here</h4>
      <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
   </div>
   <div class="card-footer text-muted mx-auto">
      <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
   </div>
</div>

Sau đó, bạn có thể tùy chọn tạo kiểu cho phần tử chân trang.

.card-footer {
  background: transparent;
  border-top: 0px;
}

bản demo: https://jsfiddle.net/rustynox/203zwyq6/

Question 7

Flex là bạn của bạn

Một cái gì đó như thế này sẽ hoạt động kỳ diệu:

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

Mở rộng đoạn mã