如何將flexbox與錨定列一起使用

Question

我正在使用display:flex以使子列的高度相同。

當col-...是display:flex直接子項時，一切都很好display:flex parent：

<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">的父<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>

工作bootply