我在一个容器中有两列。左栏实际上是一个筛选器，我希望它在不向下移动 NEXT ROW 的右栏的情况下展开和折叠。
在图片中您可以看到“专业” 框。当我单击该框底部的箭头时。里面的菜单展开。它使它下面的列 Charges 向下移动，这是可以的。
但随着收费箱。它旁边的列也下降了。我希望 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 right-box”。
关于html - Bootstrap- Left Columns 展开时使右列向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31136186/