0

我被要求使用 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>

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

谢谢！

4

2 回答 2

0

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

            $('li a').onClick(function(){
            $(this).addClass('visible');   
           });
于 2013-10-15T12:41:29.760 回答
0

好的，所以我想通了。其实很简单。这是我所做的：

        <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>

默认情况下，LEFT 和 CENTER 具有 100% 的高度，而 TOP- 和 BOTTOM right 具有 50% 的高度。所以我在 onClick 上做的是：

  • 将“.willMoveUp”的高度设置为 20%。
  • 这将使 BOTTOM RIGHT 部分跳到左边，对着 LEFT 列。
  • 在 RIGHT 部分用 span8 类替换 span4，并使其高度为 80%

完成 - 小菜一碟。谢谢

于 2013-10-23T10:42:05.250 回答