Bootstrap容器不是静态的

Question

我在容器中有两列。我有一个在另一个下面的多个容器。

我希望左列随着内部内容的增加而向下移动，而不会影响正确的列。

activity

如何使左侧容器独立于右侧容器。 ？

Answer 1

我改变了你的代码。这是代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-xs-3">
    <div class="content_left" style="border: solid 1px gainsboro;padding-bottom: 6px;">
      <span class="expand-collapse-text" style="cursor: pointer; margin-left: 7px;"><i class="fa fa-sort-desc"></i>  </span>
      <div class="left-title">Speciality</div>
      <div class="content-left1">
        <span class="expand-collapse-text" style="cursor: pointer; margin-left: 7px"> <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" style="cursor: pointer; margin-left: 7px;"> <i class="fa fa-sort-desc"></i> </span>
        <div class="left-title">Speciality</div>
        <span class="expand-collapse-text" style="cursor: pointer; margin-left: 7px;"> <i class="fa fa-sort-desc"></i> </span>
        <div class="left-title">Speciality</div>
      </div>




    </div>
  </div>
  <div class="col-xs-9" style="border: solid 1px gainsboro; margin-top: -120px; padding-bottom: 20px; ">


    <div class="content_header col-md-12" style="border-bottom: solid 1px gainsboro;">
      <div class="col-xs-1">
        <img src="#" alt="" />
      </div>
      <div class="col-xs-4 Hospital_name" style="border: none;font-size: 20px; color: gainsboro;">
        Cloud Nine Hospital
      </div>
      <div class="col-xs-3 Hospital_speciality" style="  color: darkblue; margin-top: 12px;">
        Maternity Hospital
      </div>
      <div class="col-xs-1 hospital_location" style="color: gainsboro;margin-top: 12px;">
        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" style="margin-left: 2%; margin-top: 20px;">
        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" style="background-color: orangered; border: none; color: white; border-radius: 5px;" />
          </div>
        </div>
      </div>

    </div>
  </div>