Question

我有一个部分想要像下面的图像所示：-

存在对准问题的图像应始终按图像中所示的左和右角进行附加。现在，我为此使用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>

答案将被占用，谢谢！

Answer 1

我不确定您是否需要使用position: absolute，所以我写的是不使用它。

<section class="pt-5">
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="w-100" alt="">
            </div>
            <div class="col-6 m-auto 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 mt-5">
            <div class="col-6 m-auto">
                <div class="w-75 float-right">
                    <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="col-6">
                <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="w-100" alt="">
            </div>
        </div> 
    </div>
</section>

从class="container-fluid"开始，双方仍然有一些填充。有解决方案：要么完全删除container-fluid，要么就这样删除：container-fluid pl-0 pr-0。我希望它能满足您的需求，或者至少可以使您对问题有所了解。

Answer 2

您只需在图像div上添加px-0即可禁用col默认填充。


<section class="pt-5 pb-5 p-relative">
        <div class="container p-static">
            <div class="row">

                <div class="col-6 p-static px-0">
                    <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 px-0">
                    <img src="https://i.stack.imgur.com/Lrz2v.jpg" class="img-2 img-fluid" alt="">
                </div>

            </div>


        </div>
    </section>

Answer 3

我已删除所有位置设置，因为我认为它们是不必要的。我使用bs4 no-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>

如何使用bootstrap4修复图像对齐方式？

3 个答案: