Question

这是我的第一个网站主题。但是，当我滚动该页面时，我无法设置两个侧面的div。

<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
            </button>
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Messages</a></li>
                <li><a href="#" style="margin-right: 150px"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
                </ul>
        </div>
    </div>
</nav>
<div class="container" style="margin-top:60px">

        <div class="row">
            <!--right-->
          <div class="col-sm-3 well text-center">
            <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 " >
              <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">
                                <i class="material-icons">thumb_up</i> <b>Like</b>
                            </button>
                            <button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
                                <i class="material-icons">chat_bubble_outline</i> <b>Comment</b>
                            </button>                       
                        </div>
                    </div>
                </div>
            </div>
            <!--left-->
            <div class="col-sm-2 well text-center">
                <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>

我要滚动仅两侧列向下滚动的页面时，我正在使用引导程序。我无法做到这一点。请帮助我。我正在制作一个简单的社交网站模板作为响应。当我尝试定义一类CSS来固定两个div的位置但不起作用时。

Answer 1

如果只想滚动中间容器，则可以编写一些CSS：overflow-y: scroll

修改：添加了rncrtr的建议。如果要固定边栏，也可以在CSS中应用position: fixed;。

.scrollable {
  overflow-y: scroll;
  max-height: 400px;
}

.fixed {
  position: fixed;
}

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="demo3.css">
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
            </button>
        <a class="navbar-brand" href="#">Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Messages</a></li>
          <li><a href="#" style="margin-right: 150px"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container" style="margin-top:60px">

    <div class="row">
      <!--right-->
      <div class="col-sm-3 well text-center fixed">
        <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 scrollable">
        <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 adipiscing elit. Vivamus at viverra diam, eget volutpat purus. Vestibulum scelerisque lobortis velit in dictum. Curabitur accumsan eget turpis molestie commodo. Duis mattis odio quis gravida ullamcorper. Praesent
                non quam cursus, malesuada mi quis, commodo sem. Aenean scelerisque est a vestibulum consectetur. Vivamus venenatis vehicula porttitor. Suspendisse potenti. Nunc tempor quam et orci vehicula pretium. In quis tortor eleifend velit eleifend
                faucibus. Ut egestas, mi sit amet semper lobortis, mi nunc pulvinar leo, lacinia consequat urna lacus commodo est. Nulla congue posuere varius. Praesent commodo, risus at scelerisque tristique, arcu magna eleifend metus, id gravida dui
                est tincidunt turpis. Nam hendrerit nec nunc lacinia efficitur. Pellentesque vitae tellus vulputate, sollicitudin quam vitae, semper ante. Sed et lacus sed arcu aliquet porttitor in eu dui. Sed posuere lorem et varius dapibus. Phasellus
                varius sed massa volutpat tempus. Suspendisse dignissim euismod risus ac efficitur. Duis euismod mauris ac massa fermentum, vel aliquet tortor sodales. Donec porttitor sodales nisl. Suspendisse maximus viverra massa non sagittis. Duis
                mattis lectus eget nunc euismod, eu ornare nunc vestibulum. Ut at pharetra turpis. Donec risus turpis, lacinia sit amet purus ut, lobortis ultrices nulla. Nunc fermentum urna non elit mattis, ut pharetra dui commodo. Fusce cursus mauris
                porttitor dui varius luctus. Quisque nec vestibulum velit. Nullam orci mi, congue sit amet odio a, interdum commodo nibh. Donec nec sem sodales, ornare ligula in, placerat magna. Praesent enim nulla, hendrerit sagittis lorem ut, cursus
                interdum nibh. Integer in metus justo. Mauris vitae turpis et lacus condimentum mollis quis luctus augue. Quisque fermentum augue ac purus dignissim, in luctus mauris vulputate. Phasellus id tempor purus. Donec at augue leo. Integer lectus
                massa, aliquet in bibendum vel, tincidunt sed eros. Mauris ultrices ipsum non enim fermentum finibus. Nulla porttitor faucibus tempus. Curabitur dignissim sed felis nec convallis. Aliquam gravida risus fringilla nibh efficitur tempus in
                sit amet ex. Vivamus id tempor neque, at euismod lorem. Sed dui justo, interdum eu augue et, molestie convallis mauris. Sed scelerisque blandit pretium. Vivamus posuere ex posuere lacus consectetur porttitor. Maecenas pulvinar arcu vel
                ante ornare fringilla. Praesent maximus fringilla rhoncus. Sed ac ultrices velit.
              </p>
              <button type="button" class="btn btn-default btn-sm" style="margin-top: 5px">
                                <i class="material-icons">thumb_up</i> <b>Like</b>
                            </button>
              <button type="submit" class="btn btn-default btn-sm" style="margin-top: 5px">
                                <i class="material-icons">chat_bubble_outline</i> <b>Comment</b>
                            </button>
            </div>
          </div>
        </div>
      </div>
      <!--left-->
      <div class="col-sm-2 well text-center fixed">
        <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

1 个答案: