абсолютное или фиксированное позиционирование не работает с бутстрапами и css - PullRequest
Новая
       7

абсолютное или фиксированное позиционирование не работает с бутстрапами и css

0 голосов
/ 05 февраля 2020

У меня есть страница, которая разделена на два левых и правых столбца. Я использую загрузчики 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>

1 Ответ

1 голос
/ 05 февраля 2020

Дайте позицию 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>
...