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

南希·莫里

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

这是我的问题：

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

我已经在左列中实现了固定或绝对位置属性，但它会使整个页面卡住。

<!--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>

梅格娜·布普塔尼

给一个位置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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。