响应式引导行

时间:2015-09-04 00:09:09

标签: css twitter-bootstrap responsive-design

我目前在一个正在使用的引导行中有以下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属性我忽略了帮助实现这种行为?

0 个答案:

没有答案