Question

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

选中后，该列显示0或1像素高度。
滑块的Javascript会出现，但往往会叠加在按钮内容的上方
为列创建间隔符时，没有特别允许间距左右分割为两列
当按下折叠div的按钮时，无论修改如何，按钮内容都会移动。

＆＃13;

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

＆＃13;

我应该如何处理列问题以及按钮触发问题，因为我认为它们已经捆绑在一起。

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>

这给了我足够的空间来分隔两者。

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

1 个答案: