引导列一起移动答案

【问题标题】：Bootstrap columns are moving together引导列一起移动
【发布时间】：2018-11-30 15:04:23
【问题描述】：

我有一个包含两个 div（col-md-4 和 col-md-8）的容器，我还制作了一个 JQuery 动画，它为左侧 div（col-md-4）提供了“-65%”的数量单击切换按钮时的 marginLeft。问题是当第一个 div 移动时，另一个 div (col-md-8) 也随之移动到左侧。有没有办法让第二个 div(col-md-8) 与第一个 div (col-md-4) 一起移动？基本上我想要做的是在单击按钮时隐藏和显示左侧 div，但希望它移动到第二个 div 上而不是它们在行中一起移动。希望我能正确解释我的要求。谢谢

HTML代码

<div id="row2" class="row justify-content-md-center">
                        <div id="listhide" class="col-md-4">
                            <div id="listhideinner" class="table table-striped">
                                <div id="output5"></div>
                                <div><button id="button">toggle</button></div>
                            </div>
                        </div>



                        <div id="figurerow" class="col-md-8">
                            <div id="pdfviewer" style="display:none" >
                                <h5 id="h5name" ></h5>
                                <iframe id="pdf" src="" style="width: 100%; height: 92%;" alt="pdf"></iframe>
                            </div>
                        </div>
                    </div>

动画

   var $div1 = $('#listhide')
$('#button').click(function() {
  $div1.toggleClass('isOut')
  var isOut = $div1.hasClass('isOut')
  $div1.animate({marginLeft: isOut ? '-35%' : '-65%'}, 300)
})

【问题讨论】：

请出示一些代码。
添加了一些代码，感谢@F_Mekk

标签： bootstrap-4

【解决方案1】：

我已经解决了问题，我应该使用#listhideinner div而不是#listhide div，因为它是父div，我们只想让子div移动。

动画（更新）

   var $div1 = $('#listhideinner')
$('#button').click(function() {
  $div1.toggleClass('isOut')
  var isOut = $div1.hasClass('isOut')
  $div1.animate({marginLeft: isOut ? '-35%' : '-65%'}, 300)
})

【讨论】：