Question

<div class="row">
<div class="col-lg-2">
  Panel for filter
</div>
 <div class="col-lg-6">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
 then i show the contents  
 </div>
  </div>

我在bootstrap中有一行。该行分为两部分。一个是过滤器面板的div，第二个是显示一些内容。

我在第二部分(bootstrap modal button)中有一个按钮。在导航痕迹中，我给出了隐藏过滤器面板的选项。

一切正常。我的问题是，当我隐藏第一个div时，在过滤器面板中，第二个div中的我的按钮也会改变位置。

我的要求是，如果我隐藏过滤器面板，即使第二个div中的内容发生变化，第二个div中的按钮也不会改变。

有没有人知道实现预期结果的任何解决方法？

Answer 1

试试这个：

$('button').click(function(){
  $('#panel').toggleClass('inactive');
});

#panel{
  background-color:red;
  height:100px;
  display:block;
}
#panel.inactive{
  display:none;
}
#content{
  position:relative;
  background-color:green;
  height:100px;
}
.btn{
  position:absolute;
  top:0;
  right:0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-2" id="panel">
  Panel for filter
</div>
 <div class="col-lg-6" id="content">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
 then i show the contents  
 </div>
  </div>

Answer 2

元素（您的按钮）移动的原因可能是由于少数移动设备上position: fixed;的不同解释造成的。我经历过，所讨论的固定元素不能是任何移动（例如滚动）元素的子元素。在桌面上这似乎不是问题。所以你应该把按钮放在行外面或者如果需要的话只需要

position: absolute;
top:10px;
right: 10px;

kittyCat

所述

左右

下一个原因可能是：如果您隐藏行col-lg-2的第一部分，则该行中缺少两个网格单元格。所以只需隐藏行的内容：因此，请参考kittyCat的示例并更改：

<div class="col-lg-2" id="panel">
  Panel for filter
</div>

到

<div class="col-lg-2" >
<div id="panel">  Panel for filter</div>
</div>

它应该按照需要工作。

或者如果您需要空格并且想要隐藏col-lg-2，请将第二个元素的类从col-lg-6更改为col-lg-8。

bootstrap固定位置按钮

2 个答案: