小编Nit*_*uel的帖子

Twitter Bootstrap流体容器边栏切换

我正在使用twitter bootstrap开发应用程序.2列布局.一个侧边栏和主要内容.以下是布局.

<div class="container-fluid">
<div class="row-fluid">
<div class="span3 target">
<!--Sidebar content-->
</div>
<div class="span9 ">
        <i class="icon-chevron-left toggles"></i>
<!--Body content-->
</div>
</div>
</div> 
Run Code Online (Sandbox Code Playgroud)

在单击内容中的链接时,我想隐藏侧边栏和内容以占用整个页面.目前我设法这样做,

$(document).ready(function(){
$(window).resize(function () { plot(); });

$('.toggles').click(function() {
  $('.target').toggle('fast', function() {
    $('.contents').toggleClass('span12'),
    $('.contents').toggleClass('span9'),
    $('.toggles').toggleClass('icon-chevron-right'),
  });
});
});
Run Code Online (Sandbox Code Playgroud)

但是我在隐藏span3后看到左侧有一个边距.这需要删除.同样在这种隐藏方法中,在第一次单击时,span3隐藏和span9更改为span12.这在某种程度上工作正常.但是在第二次单击时,span3首先显示,然后只有内容span12减少到span9.由于这个内容跳了下来,直到它减少到span9.我想解决这个问题.在第二次单击时,span12首先跨越9,然后侧边栏显示..类似的东西.

我见过许多类似的帖子,其中使用了"content"和"sidebar"类而不是"spanXX".但它不适合我的情况.我不知道为什么.请帮帮我..

html css jquery show-hide twitter-bootstrap

15
推荐指数
1
解决办法
2万
查看次数

实现Jquery UI可排序和可调整大小

我正在尝试实现排序并调整网格布局中的几个div的大小.

这是一个例子小提琴

但问题是,一旦我调整大小(使div更大)然后当我尝试排序时排序不正常.它不是正确对齐,而是从放置内部div的另一个div溢出.

调整大小不适合小提琴.这是我在调整大小后需要实现的正确结果(假设max-width resizable是外部div的宽度).但是在我的代码中,如果我尝试调整大小,元素是重叠的,如果我将它放在右侧,则元素溢出外部容器div.(在结果中)它没有发生,尝试将div {3}保持在div {2}的位置

我正在使用自举流体布局.所以div的大小与span类相同.这是我正在使用的代码

<div class="row-fluid" id="sortable">
            <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div>
            <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div>
            <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div>
            <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div>
            <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div>
        </div>

<script>

$(document).ready(function() {
   $(function() {
        $( "#sortable" ).sortable();
    });

$(function() {
        $('.well').resizable();
    });
});
</script>
Run Code Online (Sandbox Code Playgroud)

html css jquery jquery-ui-sortable jquery-ui-resizable

4
推荐指数
1
解决办法
7905
查看次数