时间戳

首页 > 解决方案 > 如何使用 bootstrap4 修复图像对齐？

javascript - 如何使用 bootstrap4 修复图像对齐？

问题描述

我有一个部分，我想让它如下图所示：- 在此处输入图像描述

存在对齐问题的图像应始终附有图像中给出的左右角。现在我正在使用bootstrap container这个。

我的代码：-

.p-relative {
    position: relative;
}

.p-static {
    position: static;
}

.img-1 {
    position: absolute;
    top: 0px;
    left: 0;
}
.img-2 {
    position: absolute;
    top: 0px;
    left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<section class="pt-5 pb-5 p-relative">
    <div class="container p-static">
<div class="row">
    
      <div class="col-6 p-static">
        <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-1 img-fluid" alt="">
      </div>
      <div class="col-6 pl-5">
        <h3>Heading</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      </div>
      </div>
      
      <div class="row">
    
     
      <div class="col-6 pl-5">
        <h3>Heading</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      </div>
       <div class="col-6 p-static">
        <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-2 img-fluid" alt="">
      </div>
      
      </div>
      
      
    </div>
</section>

</body>
</html>

答案将被占用，谢谢！

标签： javascripthtmlcss

解决方案

我已删除所有位置设置，因为我认为它们没有必要。我使用 bs4no-gutters和pt-5类来设置边距和填充以对齐图像和文本。

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <section class="pt-5 pb-5">
    <div class="container">
      <div class="row no-gutters">

        <div class="col-6">
          <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-fluid" alt="">
        </div>
        <div class="col-6 pl-5">
          <h3>Heading</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
        </div>
      </div>

      <div class="row no-gutters">


        <div class="col-6 pl-5 pt-5">
          <h3>Heading</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
        </div>
        <div class="col-6 pt-5">
          <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-fluid" alt="">
        </div>

      </div>


    </div>
  </section>

</body>

</html>

我已更新代码以将图像附加到左侧和右侧部分。

.img-fluid {
  width: 100%;
  height: 80% !important; /* You may edit the height accordingly */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <section class="pt-5 pb-5">
    <div class="container-fluid px-0">
      <div class="row no-gutters">

        <div class="col-6">
          <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-fluid" alt="">
        </div>
        <div class="col-6 pl-5">
          <h3>Heading</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
        </div>
      </div>

      <div class="row no-gutters">


        <div class="col-6 pl-5">
          <h3>Heading</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
        </div>
        <div class="col-6">
          <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-fluid" alt="">
        </div>

      </div>


    </div>
  </section>

</body>

</html>

推荐阅读