html - queries - template formulario bootstrap




Bootstrap-alinha o botão na parte inferior do cartão (4)

Flex é seu amigo

Algo assim vai funcionar a mágica:

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

Eu estava espiando em um dos exemplos do Bootstrap que usam as classes de card-deck e de card ( exemplo Pricing ). Eu me perguntava como alguém pode consertar o alinhamento de botões se uma das listas tiver menos itens que os outros.

Eu gostaria que todos os botões fossem alinhados verticalmente (na parte inferior de cada cartão), mas não consegui descobrir uma maneira de fazer isso. Eu tentei definir a classe .align-bottom , bem como envolver o botão em <div class="align-text-bottom"> . Eu também tentei várias sugestões a partir desta questão sobre a adição de espaço, mas ainda não há sucesso (também o espaçamento deve ser variável de tal forma que preenche o espaço restante da lista).

Embrulhar <div class="card-footer bg-white"> não produziu o resultado desejado porque não alinha o botão na parte inferior do cartão e cria algum tipo de borda em torno dele.

Alguém tem alguma ideia?

Edit: Aqui está um jsfiddle que se assemelha ao problema.


Defina o .card-body do .card-body para display:flex e flex-direction:column .

Então, dê o botão margin-top:auto .

Eu imagino que existem classes de ajuda do Bootstrap para isso.

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


Você tem que adicionar:

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

atualizado com base na adição do link jsfiddle

Você pode usar as seguintes classes modificadoras do Bootstrap 4:

  1. Adicionar d-flex ao .card-body
  2. Adicione flex-column ao .card-body
  3. Adicionar mt-auto a .btn aninhado em .card-body

violino atualizado

Consulte esta página para obter uma lista completa de classes de modificação do flexbox para o Bootstrap 4.





bootstrap-4