在cols中引导相同高度的卡 [英] Bootstrap same height cards within cols

问题描述

使用Bootstrap 3.3.6我要做3张卡。

 < div class =row> 
< div class =col-md-4> 
< div class =card> 
< p>这里有一些虚拟文字< / p> 
< button>点击这里< / button> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =card> 
< p>这里有一些虚拟文字< / p> 
< button>点击这里< / button> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =card> 
< p>这里有一些虚拟文字< / p> 
< button>点击这里< / button> 
< / div> 
< / div> 
< / div> 
 
 .card {
 border：1px solid #ddd; 
 border-radius：5px; 
 padding：20px; 
} 
  

现在Dummy文本的长度不一样，卡不会相同的高度。

我在这里找到了一个使用flexbox的招数：如何使Bootstrap列具有相同的高度？，但是这将工作在.row的直接子节点而不是.card

另一件事，即使这些卡的高度相同，按钮也不会在同一行上，因为它们会跟随文本。

解决方案

没有CSS属性可以将不同元素中的项目彼此对齐...甚至不会在flexbox中。 p>

你可以总是让按钮在底部虽然...这只是一个问题，使卡的100％高度的等高列。

  .row.flex {display：flex; } .row.flex .col-md-4 {float：none; width：33.3333％;背景：粉红色;显示：flex; flex-direction：column;}。card {font：100％; flex：1; border：1px solid gray;显示：flex; flex-direction：column;} button {margin-top：auto; align-self：center;}  

 < link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =stylesheet/>< div class =row flex> < div class =col-md-4> < div class =card> < p>这里有一些虚拟文字< / p> < button>点击这里< / button> < / div> < / div> < div class =col-md-4> < div class =card> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。别名，dolor！< / p> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。别名，dolor！< / p> < button>点击这里< / button> < / div> < / div> < div class =col-md-4> < div class =card> < p>这里有一些虚拟文字< / p> < button>点击这里< / button> < / div> < / div>< / div>  

，这在代码段中不起作用，但这是一个代码段。

Codepen演示

With Bootstrap 3.3.6 I want to make 3 cards.

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
</div>

.card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
}

Now that the Dummy text is not the same length, the cards will not be the same height.

I found a trick using flexbox here: How can I make Bootstrap columns all the same height?, but this will be working on the immediate children of the .row not the .card

Another thing, even if the cards will be the same height, the buttons will not be on the same line as they will follow the the text.

解决方案

There is no CSS property that can align items in different elements to one another...not even in flexbox.

You could always make the button be at the bottom though...that's just a matter of making the card 100% height of the equal height columns.

.row.flex {
  display: flex;
}

.row.flex .col-md-4 {
  float:none;
  width: 33.3333%;
  background: pink;
  display: flex;
  flex-direction: column;
}

.card {
  font: 100%;
  flex:1;
  border:1px solid grey;
  display: flex;
  flex-direction: column;
}

button {
  margin-top: auto;
  align-self: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex">
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
</div>

For some reason, this doesn't work in the Snippet but here's a Codepen.

Codepen Demo

这篇关于在cols中引导相同高度的卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！