Javascript重叠滑块导致Bootstrap列问题

我试图在列和一组彼此重叠的滑块之间进行拆分。目标是让按钮通过折叠切换显示内容，同时让滑块可以移动图像/数字工具提示组合，这样我就可以让用户看到他们拖动的同时获取有关他们滑动的各种图标的信息。这里是发生了什么Javascript重叠滑块导致Bootstrap列问题

当选中，该列显示0或1像素的高度。
的Javascript滑块出现，但往往在按钮内容的顶部覆盖
当创建柱分隔件，没有什么特别允许的间距拆分两列左右
当按下该按钮折叠的div，不管修改如何，带有按钮的内容都会左右移动。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
     <div class="col-xs-6"> 
 
     <div class="spacer"> 
 
     <div class = 'slider' id='slider1'></div> 
 
     <div class = 'slider' id='slider2'></div> 
 
     <div class = 'slider' id='slider3'> </div> 
 
     <div class = 'slider' id='slider4'> </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </div> 
 
\t  <div class="col-xs-6"> 
 
     <div class="spacer"> 
 

 
     <button type="button" data-target="#ConditionOne" class="btn btn-default" data-toggle="collapse">Healthy</button> 
 
     <div id="ConditionOne" class="collapse"> 
 
      None 
 
\t </div> 
 

 
     <button type="button" data-target="#ConditionTwo" class="btn btn-default" data-toggle="collapse">Okay</button> 
 
     <div id="ConditionTwo" class="collapse" > 
 
      &lt;textarea id=&#34;conditionTwoInfo&#34; name=&#34;conditionTwoInfo&#34;&gt;Second Conditional Description&lt;/textarea&gt; 
 
     </div> \t 
 
     <button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button> 
 
     <div id="ConditionThree" class="collapse" > 
 
      None 
 
     </div> \t 
 

 
     <button type="button" data-target="#ConditionFour" class="btn btn-default" data-toggle="collapse">Dead</button> 
 
     <div id="ConditionFour" class="collapse"> 
 
      &lt;textarea id=&#34;conditionFourInfo&#34; name=&#34;conditionFourInfo&#34;&gt;Final Conditional Description&lt;/textarea&gt; 
 
     </div> 
 
     </div>

我应该如何处理这两个列问题以及按钮触发问题，因为我认为他们是绑在一起。

来源

2017-09-28 user1449249

首先我做的是获得滑块的高度。从那里，我硬编码滑块的高度加上偏移

.slidespace { height: 275px; //Can be whatever you want 
      width: 100% }

用它作为一个div：

<div class="slidespace">  <div class = 'slider' id='slider1'></div> 
     <div class = 'slider' id='slider2'></div> 
     <div class = 'slider' id='slider3'> </div> 
     <div class = 'slider' id='slider4'> </div> 
    </div>

这给了我足够的空间，两个人分开。

来源

2017-10-03 20:36:40 user1449249

Javascript重叠滑块导致Bootstrap列问题

回答

相关问题