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列問題

回答

相關問題