如何让 Bootstrap 列中的图像紧贴视口边缘？

Question

我正在使用 bootstrap，我想从我的容器中取出一个图像，使其到达边缘。我已经尝试过相对和绝对位置，但我找不到诀窍。有人能帮我吗？提前致谢

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="about" class="about">
  <div class="container-fluid py-3 py-md-0">
    <div class="row">

      <div class="col-6">
        <div class="about__content d-flex h-100 flex-column justify-content-center text-white">
          <h1 class="text-uppercase fw-bold mb-md-4">About <span class="text-primary">us</span></h1>
          <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
          <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus autem deserunt doloribus earum, in maiores minus modi natus non provident qui quos reiciendis soluta veniam voluptas voluptatibus? Aut, culpa.</p>
        </div>
      </div>

      <div class="col-6">
        <div class="about__image">
          <img src="https://via.placeholder.com/800x300" alt="" class="img-fluid">
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

有很多方法可以做到这一点。一个简单的方法，不会过多地扰乱您的布局，只是 应用自定义 class 的负边距 。我们将使用变量 Bootstrap 用于列填充，并且我们将以相同的量增加图像大小以将左边缘保持在原来的位置。

Class 名称遵循 Bootstrap 对 <descriptor>-<position> 的约定。我们将把它与流体图像结合起来 class 以达到足够的特异性。

.img-fluid.shifted-end {
  margin-right: calc(- var(--bs-gutter-x) * .5);
  max-width: calc(100% + var(--bs-gutter-x) * .5);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="about" class="about">
  <div class="container-fluid py-3 py-md-0">
    <div class="row">

      <div class="col-6">
        <div class="about__content d-flex h-100 flex-column justify-content-center text-white">
          <h1 class="text-uppercase fw-bold mb-md-4">About <span class="text-primary">us</span></h1>
          <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p>
          <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus autem deserunt doloribus earum, in maiores minus modi natus non provident qui quos reiciendis soluta veniam voluptas voluptatibus? Aut, culpa.</p>
        </div>
      </div>

      <div class="col-6">
        <div class="about__image">
          <img src="https://picsum.photos/1200/800?grayscale" alt="" class="img-fluid shifted-end">
        </div>
      </div>
    </div>
  </div>
</section>

另一种策略是将图像作为背景应用到容器的a pseudo-element 上。这稍微清理了标记，只需要一点点 CSS.

.bg-custom { position: relative; overflow: hidden; } .bg-custom:after { content: ''; position: absolute; left: 50%; top: 0; width: 50%; height: 100%; background-image: url('https://picsum.photos/1200/300?grayscale'); background-position: left center; background-size: cover; background-repeat: no-repeat; }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <section id="about" class="about"> <div class="container-fluid py-3 py-md-0 bg-custom"> <div class="row"> <div class="col-6"> <div class="about__content d-flex h-100 flex-column justify-content-center text-white"> <h1 class="text-uppercase fw-bold mb-md-4">About <span class="text-primary">us</span></h1> <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur distinctio ea iure modi nostrum rem sunt! Eligendi, laudantium, quis.</p> <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus autem deserunt doloribus earum, in maiores minus modi natus non provident qui quos reiciendis soluta veniam voluptas voluptatibus? Aut, culpa.</p> </div> </div> </div> </div> </section>

如何让 Bootstrap 列中的图像紧贴视口边缘？

How can I get an image in a Bootstrap column to sit tight against the viewport edge?

containers

image

twitter-bootstrap