Twitter Bootstrap 流体容器侧边栏切换

Posted 2023-05-08

【中文标题】Twitter Bootstrap 流体容器侧边栏切换

【英文标题】：Twitter Bootstrap fluid-container Sidebar Toggle

【发布时间】：2012-03-01 22:11:26

【问题描述】：

我正在使用 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> 

单击内容中的链接时，我想隐藏侧边栏和内容以占据整个页面。目前我设法做到了这种方式，

$(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'),
  );
);
);

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

我见过很多类似的帖子，其中使用“内容”和“侧边栏”类而不是“spanXX”。但它不适用于我的情况。我不知道为什么。 请帮帮我..

【参考方案1】：

由于 jQuery 添加的切换效果的动画，您的span9 div 正在向下跳跃，它会同时为宽度和高度设置动画，因此您在被切换的 div 周围的内容会随着动画的进行而被向下推。您可以通过将动画过程加速到100 毫秒或绝对定位侧边栏来克服这个问题。至于由bootstrap.css 本身引起的保证金问题，在第 222 行，我们有以下内容：

.row-fluid > [class*="span"]:first-child 
  margin-left: 0;

first-child 伪元素属性 margin:0 到第一个元素，在这种情况下是被切换的侧边栏，所以一旦侧边栏被隐藏，第二个 span 标签（内容 div）不会' t 继承此属性并保留应用于span 标记的默认margin，例如

.row-fluid > [class*="span"] 
  float: left;
  margin-left: 2.127659574%;

你可以用 jQuery 克服这个边距问题。

这是我制作的几个演示：

Hiding sidebar with no transition effects Hiding sidebar with minimal transition effect

---

更新了小提琴，修复了评论者发现我没有注意到的问题，现在它可以正常工作了。添加了一个 .no-sidebar 类，该类在切换时添加，该类删除了由引导程序创建的 margin-left，因此现在它可以很好地与响应式样式表一起使用。

http://jsfiddle.net/andresilich/dQ5b7/23/

【讨论】：

这是一个很好的解决方案。但是，我发现了一个您可以在演示中看到的问题。每当您单击#content 的任何元素时，您的边距都会发生变化。你能解决它吗？

@NelsonReis 边距会发生变化，因为它是一个流动的文档，如果您想要一个固定的文档，您只需将 <div class="container-fluid"> 更改为简单的 container 并将 <div class="row-fluid"> 容器更改为简单的<div class="row">

@NelsonReis 这是一个没有流体痕迹的修补版本，jsfiddle.net/dQ5b7/21

我不是这个意思。如果您尝试单击#content 上的任何元素，例如页面上的任何文本，边距将会改变。似乎事件是在任何元素单击时触发的，而不是在您单击切换元素时触发的。

@NelsonReis 更新了小提琴，现在它工作正常，添加了一个类来切换而不是直接在 jquery 中切换 css，这样演示可以支持响应式样式表设置的媒体查询。 demo

【参考方案2】：

试试这两个

---

代码https://github.com/IronSummitMedia/startbootstrap-simple-

演示http://ironsummitmedia.github.io/startbootstrap-simple-sidebar

---

更新（再添加一个）

代码 http://www.bootstrapzero.com/bootstrap-template/facebook

演示 http://www.bootply.com/render/96266

---