Javascript CSS布局与twitter引导

我被要求使用Twitter引导创建一个布局，当按下某个按钮时，该布局会发生很大的变化，因此我需要编写一些JavaScript来更改布局。让我解释一下：

默认情况下：3列布局，其中最右侧的列分为两半，形成上部和下部。比如：

<div class="container">
    <div id="grid">
        <div class="row">
          <div class="span4 visible">LEFT</div>
          <div class="span4 visible">CENTER</div>
          <div class="span4 visible">
              <div class="span4 visible">RIGHT TOP</div>
              <div class="span4 visible">RIGHT BOTTOM</div>
          </div>
      </div>
  </div>

<div id="grid">
    <div class="row">
        <div class="span4 visible">LEFT</div>
        <div class="span8 visible">
            <div class="row">
                <div class="span4 visible">CENTER TOP LEFT</div>
                <div class="span4 visible">CENTER TOP RIGHT</div>
            </div>
            <div class="row">
                <div class="span8 visible">CENTER BOTTOM</div> 
            </div>                     
        </div>
    </div>
</div>

左边
居中
右上方
右下角

然后，如果单击某个按钮，右下角的块将展开并占据中柱和右柱，将中柱向上推。比如：

<div class="container">
    <div id="grid">
        <div class="row">
          <div class="span4 visible">LEFT</div>
          <div class="span4 visible">CENTER</div>
          <div class="span4 visible">
              <div class="span4 visible">RIGHT TOP</div>
              <div class="span4 visible">RIGHT BOTTOM</div>
          </div>
      </div>
  </div>

<div id="grid">
    <div class="row">
        <div class="span4 visible">LEFT</div>
        <div class="span8 visible">
            <div class="row">
                <div class="span4 visible">CENTER TOP LEFT</div>
                <div class="span4 visible">CENTER TOP RIGHT</div>
            </div>
            <div class="row">
                <div class="span8 visible">CENTER BOTTOM</div> 
            </div>                     
        </div>
    </div>
</div>

左边
中左上角
中上右
中底

我该如何着手解决这个问题？或者我应该使用完全不同的方法？客户端的问题是：让右下角的框在屏幕上展开，占据两列，从而使右上角和中上角的块更小，但可以滚动

---

谢谢

您可以使用jquery并尝试以下操作：

            $('li a').onClick(function(){
            $(this).addClass('visible');   
           });

---

好吧，我想起来了。其实很简单。以下是我所做的：

        <div class="container-fluid" style="height:100%">
            <div class="row-fluid" style="height:100%">
                <div class="span4">LEFT</div>
                <div class="span4 willMoveUp">CENTER</div>
                <div class="span4 willMoveUp">TOP RIGHT</div>
                <div class="span4">BOTTOM RIGHT
                </div>
            </div>

左边
居中
右上角
右下角

默认情况下，左和中有100%的高度，右上和右下有50%的高度。 因此，我在单击时所做的是：

• 将“.willMoveUp”上的高度设置为20%
• 这将使右下角的部分向左跳跃，紧靠左栏
• 将右侧零件上的span4更换为span8级，并使其达到80%的高度

---

完成-小菜一碟。谢谢

您使用的是Bootstrap 2还是Bootstrap 3？到目前为止你试过什么，或者这是一个“我从哪里开始？”的问题引导程序2，不是，不是。