Question

使用Bootstrap 3.3.6我想制作3张卡。

<!DOCTYPE html>
<style>
#overlay {
 visibility: hidden; position: absolute; left: 0px;top: 0px; width:100%; height:100%; text-align:center; z-index: 1000;
}

#overlay div {width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center;
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";    
}           
</script>

<body>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
<div id="overlay">
<div>
      <p>Please complete the form below.</p>

      <form action="test.asp" method="post" id="contact-form">
        <input type="text" name="field1"><br>
        <input type="text" name="field2"><br>
        <input type="submit" value="Go">
    </form><br>
    Click here to [<a href='#' onclick='overlay()'>close</a>]<br>
 </div>
</div>
</body>
</html>

现在虚拟文本的长度不同，卡的高度也不一样。

我在这里找到了一个使用flexbox的技巧：How can I make Bootstrap columns all the same height?，但这将对.row的直接孩子起作用而不是.card

另一件事，即使卡片的高度相同，按钮也不会跟在文本后面的同一行。

Answer 1

没有CSS属性可以将不同元素中的项目彼此对齐......即使在flexbox中也是如此。

你可以总是让按钮位于底部但是......这只是让卡片在高度相等的列的高度为100％的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

出于某种原因，这在代码片段中不起作用，但这是Codepen。

Codepen Demo

Answer 2

您应该移除card div，并使用card设置col-md-4课程从那以后你可以像flex那样使用flexbox设置相同的高度

.row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

在cols中引导相同的高度卡

2 个答案: