[html] 부트 스트랩-카드 하단에 버튼 정렬

Question 1

card-deck및 card클래스 를 사용하는 부트 스트랩 예제 중 하나를 살펴 보았습니다 ( 가격 예제 ). 목록 중 하나에 다른 항목보다 항목이 적 으면 단추 정렬을 어떻게 수정할 수 있는지 궁금했습니다.

모든 버튼을 세로로 정렬하고 (각 카드 하단에 있음)이 작업을 수행하는 방법을 알 수 없습니다. .align-bottom클래스를 설정 하고 버튼을 <div class="align-text-bottom">. 나는 또한 이 질문 에서 공간 추가에 대한 몇 가지 제안을 시도 했지만 여전히 성공하지 못했습니다 (또한 간격은 목록의 나머지 공간을 채우도록 가변적이어야합니다).

래핑 <div class="card-footer bg-white">은 카드 하단의 버튼을 정렬하지 않고 주위에 일종의 테두리를 생성하기 때문에 원하는 결과 를 얻지 못했습니다.

누구나 아이디어가 있습니까?

편집 : 여기 문제와 유사한 jsfiddle 이 있습니다.

Question 2

다음 Bootstrap 4 수정 자 클래스를 사용할 수 있습니다.

추가 d-flex로.card-body
추가 flex-column로.card-body
추가 mt-auto로 .btn중첩에.card-body

깡깡이

부트 스트랩 4의 클래스를 수정하는 flexbox의 전체 목록은 이 페이지 를 참조하십시오 .

Question 3

유사한 질문이 여기 에 답변되었습니다 .

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는 display : flex이지만 card-body그렇지 않습니다. 이 때문에 당신은 추가해야 d-flex flex-column받는 사람 card-body. 이렇게하면 flexbox 정렬 클래스가 작동합니다.

또 다른 옵션은 mt-auto버튼에 (자동 상단 여백) 을 사용 하여 카드 하단으로 밀어 넣는 것입니다.

Question 4

.card-bodydiv를 display:flex및로 설정합니다 flex-direction:column.

그런 다음 버튼을 제공합니다 margin-top:auto.

이에 대한 부트 스트랩 도움말 클래스가 있다고 생각합니다.

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

스 니펫 확장

Question 5

다음을 추가해야합니다.

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

Question 6

바닥 글을 사용하면 이미 모든 것이 설정되어 있습니다.

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

그런 다음 선택적으로 카드 바닥 글 요소의 스타일을 지정할 수 있습니다.

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

데모 : https://jsfiddle.net/rustynox/203zwyq6/

Question 7

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>

스 니펫 확장