Question

我无法修复两侧div响应。我搜索了很多答案，但对我没有用。我在CSS中非常忙。这是我的代码。

[class*="col-"] {
  float: left;
  /*padding: 10px;*/
}


/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

<div class="container">

  <div class="row">
    <!--left-->
    <div class="col-sm-3 well text-center col-3 left">
      <div class="well">
        <p><a href="#">My Profile</a></p>
        <img src="avatar3.png" class="img-circle" height="65" width="65" alt="Avatar"><br>
        <button type="button" class="btn btn-default" style="margin-top: 10px">Default</button>
        <button type="button" class="btn btn-primary" style="margin-top: 10px">Primary</button>
      </div>
      <div class="well">
        <p><a href="#">Interests</a></p>
        <p>
          <span class="label label-default">News</span>
          <span class="label label-primary">W3Schools</span>
          <span class="label label-success">Labels</span>
          <span class="label label-info">Football</span>
          <span class="label label-warning">Gaming</span>
          <span class="label label-danger">Friends</span>
        </p>
      </div>
    </div>
    <div class="col-sm-7 col-7">
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <form>
              <div class="panel-body">
                <label for="comment">Status:</label>
                <tr>
                  <textarea class="form-control" rows="2" id="comment"></textarea>
                </tr>
                <button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
										<span class="glyphicon glyphicon-thumbs-up"></span> Like
									</button>
                <button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px"><span class="glyphicon glyphicon-pencil"></span>Post</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 rounded">
          <div class="well">
            <img src="avatar2.png" class="img-circle" height="65" width="65" alt="Avatar">
            <p class="text-left" style="margin-top: 5px">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
									 <b>Like</b>
								</button>
            <button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
									<b>Comment</b>
								</button>
          </div>
        </div>
      </div>
    </div>
    <!--right-->
    <div class="col-sm-2 well text-center col-2 right">
      <div class="thumbnail">
        <p>Upcoming Events:</p>
        <img src="paris.jpg" alt="Paris" width="400" height="300">
        <p><strong>Paris</strong></p>
        <p>Fri. 27 November 2015</p>
        <button class="btn btn-primary">Info</button>
      </div>
    </div>
  </div>
</div>

当我滚动页面时，我希望这两个div滚动一些位置的固定位置，但中间div滚动连续。所有div滚动直到div内容结束。我无法通过响应来完成。

Answer 1

这会有所帮助

.. WARNING:: The magic incantation - a blank line::

   $ ls /

无法固定两侧div固定与响应

1 个答案: