使用 Bootstrap 和 jQuery 在单击事件时处理 div 的切换

Question

我的 html 页面中有两个并排的 divs。

我想单击 button 并在右侧切换 div (show/hide)。所以我使用 jquery 和 jquery 的 .toggle() 方法。

问题是，当我向右切换 div 时，左侧的 div 似乎向左移动并离开屏幕一半。我在 Chrome 中浏览了开发工具，我认为是 bootstrap 弄乱了我的 divs

所以我认为我必须自己编写 css 来覆盖 bootstrap css 但我不确定

Link 到显示我的问题的 FIDDLE。

一旦右侧 div 被隐藏，我希望左侧 div 填满屏幕。（宽度方向）

FIX

已更新FIDDLE

Answer 1

不要使用 push-md-10，而是尝试使用常规 col-md-12 作为重组

因此，如果您希望 div 留在页面上的位置，您可以

 <div class="col-md-10">
    //Content to hide
 </div>
 <div class="col-md-2">
   //content to hide
 </div>

现在您可以只隐藏该列中的内容

又如：

<div class="col-md-3"></div>
<div class="col-md-5"> something worth 5 pushed 3 over </div>
<div class="col-md-4"></div>

注意：您总是需要 12 的因数，因为它构成 bootstrap 行大小

Handling toggle of divs upon a click event using Bootstrap and jQuery