代码之家 › 专栏 › 技术社区 › user1449249

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

nouislider twitter-bootstrap-3 javascript

user1449249 · 技术社区 · 7 年前

选中时,该列显示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>

我应该如何处理列问题和按钮触发问题,因为我假设它们联系在一起。

1 回复 | 直到 7 年前

user1449249 7 年前

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

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