【发布时间】：2015-06-30 10:46:56
【问题描述】：
我在一个容器中有两列。左列实际上是一个过滤器，我希望它在不向下移动 NEXT ROW 的右列的情况下展开和折叠。
在图片中，您可以看到 “Speciality” 框。当我单击该框底部的箭头时。里面的菜单展开。它使它下面的列Charges向下移动，这没关系。
但随着收费箱。它旁边的列也下降了。我希望右列留在原地。而且只有左边的可以上下移动。 有什么线索吗？
这是我的 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>
【问题讨论】：
-
据我所知，您需要在 HTML 中包含
.row类。这样你就可以更好地控制网格。见getbootstrap.com/css/#grid-intro -
你能把它放到 bootply 或 jsfiddle 中吗？
-
bootply.com/9rC5Bcmnbw 为您做了一个靴子，先生！
标签： html css twitter-bootstrap