我目前在一个正在使用的引导行中有以下3列,因为它们是md-4,它们占用相等的部分
基本上看起来像:
ColA ColB ColC
<div class="row">
<div class="col-md-4"> <p class="control-label h3"> ColA </p>
<div class="jumbotron ColA">
<textarea class="tArea" id="AText" rows="5"></textarea>
</div>
<p class="control-label h3">ColB </p>
<div class="jumbotron ColB">
<textarea class="tArea" id="BText" rows="5" cols="25" ></textarea>
</div>
</div>
<div class="col-md-8"><p class="control-label h3">ColC </p>
<div class="jumbotron ColC">
<textarea class="tArea" id="CText" rows="5" cols="25" ></textarea>
</div></div>
</div>
我想要实现的是悬浮在列上,将其扩展到高度和宽度的两倍,同时将其他列推向或拉向左侧。
作为一个例子,如果我在Cola Id上面盘旋,请看布局如下:
| ColB | ColA |
| ColC | MoreA |
将鼠标悬停在B上:
| ColA | ColB |
| ColC | MoreB |
和C:
| ColA | ColC |
| ColB | MoreC |
我已经尝试分别拉动,推动和浮动div,并且能够在A和B上获得所需的行为,但它看起来非常不稳定,而且我不能在Jquery中轻松实现。是否有一些css属性我忽略了帮助实现这种行为?