Javascript 与滑块重叠导致 Bootstrap 列问题

Question

我正在尝试在列和一组彼此重叠的滑块之间进行拆分。目标是让按钮通过折叠切换显示内容，同时使用 image/number 工具提示组合移动滑块，这样我就可以让用户看到他们正在拖动的内容，同时获取有关他们正在滑动的各种图标的信息.事情是这样的

选中后，该列显示 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>
  </div>
 </div>
 </div>
       <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
   </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> 
      <button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button>
         <div id="ConditionThree" class="collapse" >
            None
      </div> 

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

我应该如何处理列问题和按钮触发问题，因为我认为它们是捆绑在一起的。

Answer 1

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

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

这足以让我 space 将两者分开。

Javascript 与滑块重叠导致 Bootstrap 列问题

Javascript overlap with slider causing Bootstrap Column Issues

javascript

twitter-bootstrap-3

nouislider