我在容器中有两列。左列实际上是一个过滤器，我希望它能够扩展和折叠而不会向下移动NEXT ROW的右列。
在图像中，您可以看到“特殊性”框。当我单击该框底部的箭头时。里面的菜单展开。它使“电荷”下方的列向下移动，这还可以。
但是随着收费箱。旁边的列也下降。我希望Right Columns保持原样。而且只有左手才能上下移动。
有线索吗？
这是我的HTML代码
<div class="container">
<div class="col-xs-3">
<div class="content_left">
<span class="expand-collapse-text exp"><i class="fa fa-sort-desc"></i> </span>
<div class="left-title"> Speciality </div>
<div class="content-left1">
<span class="expand-collapse-text exp" > <i class="fa fa-sort-desc"></i></span>
<div class="left-title"> Multi Speciality </div>
<div class="left_options">
<input value="1" id="ca1" class="handleclick" type="checkbox" name="ca"><label for="ca1"><span></span>Heart</label> <br>
<input value="2" id="ca2" class="handleclick" type="checkbox" name="ca"><label for="ca2"><span></span>General</label> <br>
<input value="3" id="ca3" class="handleclick" type="checkbox" name="ca"><label for="ca3"><span></span>Dental</label> <br>
<input value="16" id="ca16" class="handleclick" type="checkbox" name="ca"><label for="ca16"><span></span>Maternity</label> <br>
<input value="17" id="ca17" class="handleclick" type="checkbox" name="ca"><label for="ca17"><span></span>Orthopedic</label> <br>
<input value="18" id="ca18" class="handleclick" type="checkbox" name="ca"><label for="ca18"><span></span>Pediatric</label> <br>
<input value="19" id="ca19" class="handleclick" type="checkbox" name="ca"><label for="ca19"><span></span>Mental Health</label>
<br>
</div>
<span class="expand-collapse-text exp"> <i class="fa fa-sort-desc"></i> </span>
<div class="left-title"> Speciality </div>
<span class="expand-collapse-text exp"> <i class="fa fa-sort-desc"></i> </span>
<div class="left-title"> Speciality </div>
</div>
</div>
</div>
<div class="col-xs-9 right-box">
<div class="content_header col-md-12">
<div class="col-xs-1">
<img src="#" alt=""/>
</div>
<div class="col-xs-4 Hospital_name">
Cloud Nine Hospital
</div>
<div class="col-xs-3 Hospital_speciality Hospital_type">
Maternity Hospital
</div>
<div class="col-xs-1 hospital_location Hospital_location">
Bangalore
</div>
<div class="col-xs-1 col-xs-offset-1">
★★★★★
</div>
<div class="col-xs-1">
4.2
</div>
</div>
<div class="Hospital_Details">
<div class="col-xs-5" style="margin-left: -3.55%;">
<img src="images/1.jpg" class="img-responsive"/>
</div>
<div class="col-xs-7 fee">
Consultation fee: <span style="margin-left: 10%; color: skyblue">Rs: 500</span> <span style="margin-left: 3%; color: gainsboro">Onwards</span>
<br>
<br>
Ward Charges <span style="margin-left: 13.5%; color: skyblue">Rs: 500</span> <span style="margin-left: 3%; color: gainsboro">Onwards</span>
<br>
<br>
<br>
Contact: <span style="margin-left: 23%; color: darkblue">Jayanagar</span> <span style="margin-left: 3%; color: skyblue">9785461238</span>
<br>
<br>
<div class="col-xs-5">
<ul class="list-inline list-unstyled">
<li><img src="#"/></li>
<li><img src="#"/></li>
<li><img src="#"/></li>
<li><img src="#"/></li>
</ul>
</div>
<br>
<hr>
<div class="col-xs-12">
<div class="col-xs-5"> View More Details <span> > </span>
</div>
<div class="col-xs-offset-2 col-xs-5">
<input type="submit" value="Book Appointment" class="appointment" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column two-->
<div class="container">
<div class="div col-xs-3">
<div class="content_left">
<span class="expand-collapse-text exp"> <i class="fa fa-sort-desc"></i> </span>
<div class="left-title">
Charges <select name="Charges">
<option>In Rupees </option>
<option></option>
</select>
</div>
<div class="content-left1">
<input type="text" id="amount" readonly >
<div id="slider-range"></div>
<br>
<input type="text" id="amount1" readonly>
<div id="slider-range1"></div>
</div>
</div>
</div>
<div class="col-xs-9 right-box">
<div class="content_header col-md-12">
<div class="col-xs-1">
<img src="#" alt=""/>
</div>
<div class="col-xs-4 Hospital_name">
Cloud Nine Hospital
</div>
<div class="col-xs-3 Hospital_speciality Hospital_type">
Maternity Hospital
</div>
<div class="col-xs-1 hospital_location Hospital_location">
Bangalore
</div>
<div class="col-xs-1 col-xs-offset-1">
★★★★★
</div>
<div class="col-xs-1">
4.2
</div>
</div>
<div class="Hospital_Details">
<div class="col-xs-5" style="margin-left: -3.55%;">
<img src="images/1.jpg" class="img-responsive"/>
</div>
<div class="col-xs-7 fee">
Consultation fee: <span style="margin-left: 10%; color: skyblue">Rs: 500</span> <span style="margin-left: 3%; color: gainsboro">Onwards</span>
<br>
<br>
Ward Charges <span style="margin-left: 13.5%; color: skyblue">Rs: 500</span> <span style="margin-left: 3%; color: gainsboro">Onwards</span>
<br>
<br>
<br>
Contact: <span style="margin-left: 23%; color: darkblue">Jayanagar</span> <span style="margin-left: 3%; color: skyblue">9785461238</span>
<br>
<br>
<div class="col-xs-5">
<ul class="list-inline list-unstyled">
<li><img src="#"/></li>
<li><img src="#"/></li>
<li><img src="#"/></li>
<li><img src="#"/></li>
</ul>
</div>
<br>
<hr>
<div class="col-xs-12">
<div class="col-xs-5"> View More Details <span> > </span>
</div>
<div class="col-xs-offset-2 col-xs-5">
<input type="submit" value="Book Appointment" class="appointment" />
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
您需要重组标记。查看您的页面设计，我认为在更高级别上它应该只有1个容器，并且应该包含2列。因此，您的“特色”和“费用”部分应位于1列下，即“ col-xs-3”，其他则为“ col-xs-9右框”。
Demo