引导固定位置按钮答案

【问题标题】：bootstrap fixed position button引导固定位置按钮
【发布时间】：2017-01-06 21:49:11
【问题描述】：

<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>

我在引导程序中有一行。该行分为两部分。一是过滤面板的div，二是显示一些内容。

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

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

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

有没有人知道任何解决方法来达到预期的结果？

【问题讨论】：

显示一些代码，以便我们提供帮助。
没有代码我们如何帮助您？
过滤面板和内容即时显示使用rest api调用。
一切正常。但我怎样才能使按钮位置固定。我试过位置：固定；它没有用。
你想把它放在哪里。右上角或左上角

标签： css twitter-bootstrap bootstrap-modal

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：