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

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

1 个答案: