绝对或固定定位不适用于引导程序和 css

Question

我有一个页面分为左右两栏。我正在使用引导程序 3.

这是我的问题：

我希望包含图像的左列固定，而右列可以像往常一样滚动。

我已将位置属性 fixed 或 absolute 实现到左栏，但它使整个页面卡住。

<!--left fixed column-->
<div class="col-sm-5" style="position:fixed">
  <img src="pic.png" class="img-responsive" style="height:100vh;">
</div>

或

<div class="col-sm-5" style="position:absolute">
  <img src="pic.png" class="img-responsive" style="height:100vh;">
</div>

这里是完整的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></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.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
  <body>
    <nav class="navbar navbar-fixed-top">
      <div class="container">
      
        <div class="collapse navbar-collapse" id="navgator" style="background:blue;color:white;height:40px;">
          <ul class="nav navbar-nav navbar-right">
    
            <a href="" class="myhome">Home</a>
         
          </ul>
        </div>
      </div>
    </nav>
    
    <div class="row">
      <!--left fixed column-->
      <div class="col-sm-5">
        <img src="pic.png" class="img-responsive" style="height:100vh;">
      </div>   
      <!--right scrollable column-->
      <div class="col-sm-7">
        Iam scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
      </div>
    </div> 
  </body>
</html>

Answer 1

把位置给img，而不是col-sm-5。

试试这个：

<!DOCTYPE html>
<html lang="en">
<head>

  <title></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.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body >

<nav class="navbar navbar-fixed-top">
  <div class="container">

    <div class="collapse navbar-collapse" id="navgator" style="background:blue;color:white;height:40px;">
      <ul class="nav navbar-nav navbar-right">

        <a href="" class="myhome">Home</a>

      </ul>
    </div>
  </div>
</nav>


 <div class="row">
<!--left fixed column-->
  <div class="col-sm-5">
<img src="https://www.isupportcause.com/r/images/previewImage.png" class="img-responsive" style="position: fixed;">
</div>

<!--right scrollable column-->

  <div class="col-sm-7">
Iam scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>

</div>


</div> 






</body>
</html>

绝对或固定定位不适用于引导程序和 css

absolute or fixed positioning not working with bootstraps and css

css

twitter-bootstrap-3