-1

问题图片

尝试修复代码，以便此 Bootstrap Carousel 中的六个图像都显示在我的（新版本）Google 网站上，而不是像屏幕截图中那样被推到顶部。将不胜感激。代码在这里

4

1 回答 1

0

一些东西：

  • 轮播中的图像在灰色边框下方有一个棕金色条，这会使访问者望而却步……因此您可能需要裁剪图像
  • 我用粉红色替换了容器类的背景，以便我们更容易检查图像周围的间距
  • 我添加了 2% 的底部，以便我们可以看到粉红色的背景，您可以根据需要进行调整

工作片段：

body {
  box-sizing: border-box;
}

.container {
  background-color: pink;
  padding: 2%;
}

.carousel-inner {
  height: 100%;
}
<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.4.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>


<div class="container">
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <a href="http://www.ashdownhouse.com">
          <img src="https://drive.google.com/uc?export=view&id=1HIkliSgbwTyE2jm0VTKovz-0sL-MvtY5" class="d-block w-100" alt="..." />
        </a>
      </div>
      <div class="carousel-item">
        <a href="http://www.barfieldschool.com">
          <img src="https://drive.google.com/uc?export=view&id=1D6CYYSJ5RmFTss_Uwtz26Yp4iDbzjPGx" class="d-block w-100" alt="..." />
        </a>
      </div>
      <div class="carousel-item">
        <a href="http://www.chandlings.org.uk">
          <img src="https://drive.google.com/uc?export=view&id=1sjJbhxr-BlqGFMynCwvoyjxsv9QgizKi" class="d-block w-100" alt="..." />
        </a>
      </div>
      <div class="carousel-item">
        <a href="http://www.cothill.net">
          <img src="https://drive.google.com/uc?export=view&id=1_uoO1czc3U1y-Yzl7Bl6-Ue7LhgcX8HL" class="d-block w-100" alt="..." />
        </a>
      </div>
      <div class="carousel-item">
        <a href="http://www.kitebrookhouse.com">
          <img src="https://drive.google.com/uc?export=view&id=17l0qy3JT6tt_O-fte7P11nMipqifhvg2" class="d-block w-100" alt="..." />
        </a>
      </div>
      <div class="carousel-item">
        <a href="http://www.mowdenhall.co.uk">
          <img src="https://drive.google.com/uc?export=view&id=1XFeNIUl1ZoWq1Ph_6siVM0bV0yxf0X3P" class="d-block w-100" alt="..." />
        </a>
      </div>
      <div class="carousel-item">
        <a href="http://www.sauveterre.net">
          <img src="https://drive.google.com/uc?export=view&id=10XrCAUh9c4RSnoD0pjkdNl0PXV0whST2" class="d-block w-100" alt="..." />
        </a>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>

于 2020-01-01T00:20:42.140 回答