html - 我如何在 bs4 的轮播中集中和缩小两个图像之间的差距？

Question

您好，我正在寻找一种解决方案，了解如何为我的图像修复我的轮播，我想集中并缩小两张图像之间的差距。我尝试在互联网上搜索解决方案，但一无所获。我想更改 CSS，但不知道要更改什么。请帮忙。

轮播HTML代码

.img-container {
  position: relative;
  display: inline-block;
}

.img-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 241px;
  height: 143px;
  background: rgba(0, 0, 0, 0.5);
  margin: 0px 0px 0px 8px;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.img-container:hover .overlay {
  opacity: 1;
}

.overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.course {
  width: 249px;
  height: 145px;
}

<div class="carousel slide" data-ride="carousel" id="multi_item">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-2" data-slide-to="1"></li>
    <li data-target="#carousel-example-2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row">
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course16.jpg" alt="1 slide">
            <div class="overlay pointer">
              <span>CCTV Technology and Installation</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course8.jpg" alt="2 slide">
            <div class="overlay pointer">
              <span>Windows XP, 7, 8 & 10 Installation</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course16.jpg" alt="3 slide">
            <div class="overlay pointer">
              <span>CCTV Course</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course29.jpg" alt="4 slide">
            <div class="overlay pointer">
              <span>Computer Server Installation & Configuration</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course24.jpg" alt="5 slide">
            <div class="overlay pointer">
              <span>Computer Network Configuration & Troubleshoot</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course10.jpg" alt="6 slide">
            <div class="overlay pointer">
              <span>Printer Troubleshoot & Maintenance</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course23.jpg" alt="7 slide">
            <div class="overlay pointer">
              <span>Windows 7 Support and Deployment</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
            <div class="overlay pointer">
              <span>Microsoft XP & 7 Support and Troubleshoot</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
            <div class="overlay pointer">
              <span>Microsoft XP & 7 Support and Troubleshoot</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
            <div class="overlay pointer">
              <span>Microsoft XP & 7 Support and Troubleshoot</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#multi_item" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#multi_item" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

Answer 1

这个空间是由padding-left引起的和 padding-right col-sm 属性总计 15px类；

所以，我们只是在我们的 CSS 中用 2px 的值覆盖它;我不得不使用 !important在这里，但如果你写 <style>加载 bootstrap.css 后阻塞, 你不需要这个 !important - 下面是完整的工作片段:

/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  height: 100%;
}

.img-container {
  position: relative;
  display: inline-block;
}

.img-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 241px;
  height: 143px;
  background: rgba(0, 0, 0, 0.5);
  margin: 0px 0px 0px 8px;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.img-container:hover .overlay {
  opacity: 1;
}

.overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.course {
  width: 249px;
  height: 145px;
}

.col-sm {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="carousel slide" data-ride="carousel" id="multi_item">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-2" data-slide-to="1"></li>
    <li data-target="#carousel-example-2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row">
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="1 slide">
            <div class="overlay pointer">
              <span>CCTV Technology and Installation</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="2 slide">
            <div class="overlay pointer">
              <span>Windows XP, 7, 8 & 10 Installation</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="3 slide">
            <div class="overlay pointer">
              <span>CCTV Course</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="4 slide">
            <div class="overlay pointer">
              <span>Computer Server Installation & Configuration</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="5 slide">
            <div class="overlay pointer">
              <span>Computer Network Configuration & Troubleshoot</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="6 slide">
            <div class="overlay pointer">
              <span>Printer Troubleshoot & Maintenance</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="7 slide">
            <div class="overlay pointer">
              <span>Windows 7 Support and Deployment</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="8 slide">
            <div class="overlay pointer">
              <span>Microsoft XP & 7 Support and Troubleshoot</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="8 slide">
            <div class="overlay pointer">
              <span>Microsoft XP & 7 Support and Troubleshoot</span>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="img-container">
            <img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="8 slide">
            <div class="overlay pointer">
              <span>Microsoft XP & 7 Support and Troubleshoot</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#multi_item" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#multi_item" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>