Question

我在容器中有两列。左列实际上是一个过滤器，我希望它能够展开和折叠，而不会向下移动NEXT ROW的右列。 enter image description here

在图片中，您可以看到＆＃34; Specialty＆＃34; 框。当我点击该框底部的箭头时。里面的菜单扩展。它使 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>

Answer 1

您需要重新构建标记。查看您的页面设计我认为在更高级别它应该只有1个容器，它应该包含2列。所以你的专业＆＃34;和＆＃34;收费＆＃34;该部分应属于1栏，即＃34; col-xs-3＆＃34;和其他将有＃34; col-xs-9右框＆＃34;。

Demo

Bootstrap-左列在展开时使右列向下移动

1 个答案: