如何将 flexbox 与锚定列一起使用

Question

我使用display:flex 是为了让孩子的列具有相同的高度。

当col-... 是display:flex 父级的直接子级时，一切正常：

<div class="container flex">

    <div class="col-sm-4 flex-col">
      jkkfjds<br>dsfjdk<br>fdsfk
    </div>



    <div class="col-sm-6 flex-col">
      jfkdjkfsdjk
    </div>
</div>

.flex {
  display:flex;
}

.flex-col {
  border:1px solid black;
}

但是我希望 flex-col 被锚定。当我尝试将<a> 添加为<div class="col-sm-4 flex-col"> 的父级时，它会像这样分解：

http://www.bootply.com/C8SmhEmvGS

我已经尝试将display:block 设置为<a>，但没有帮助。

Answer 1

将col-sm-4 flex-col 类添加到a 而不是div。

<div class="container flex">
  <a href="#" class="col-sm-4 flex-col">
    <div >
      jkkfjds<br>dsfjdk<br>fdsfk
    </div>
  </a>

  <a href="#" class="col-sm-6 flex-col">
    <div >
      jfkdjkfsdjk
    </div>
  </a>
 </div>

Working bootply