Bootstrap 4 Carousel 响应式（图像和文本）

Posted 2023-03-05

【中文标题】Bootstrap 4 Carousel 响应式（图像和文本）

【英文标题】：Bootstrap 4 Carousel responsive (image and text)

【发布时间】：2018-02-07 13:50:27

【问题描述】：

我复制并粘贴了 Bootstrap 4 官网的 Carousel 代码示例，但我发现这个资源没有响应。

您可以在此页面中尝试： https://getbootstrap.com/docs/4.0/examples/carousel/ 例如，如果您使用小型手机调整大小或打开，文本将消失。图像也没有响应...

我需要做什么才能使图像和文本响应？

html 代码：

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" >
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-left">
          <h1>Example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" >
      <div class="container">
        <div class="carousel-caption d-none d-md-block">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" >
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-right">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS：

    /* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body 
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel 
  margin-bottom: 4rem;

/* Since positioning the image, we need to help out the caption */
.carousel-caption 
  z-index: 10;
  bottom: 3rem;


/* Declare heights because of positioning of img element */
.carousel-item 
  height: 32rem;
  background-color: #777;

.carousel-item > img 
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 
  margin-bottom: 1.5rem;
  text-align: center;

.marketing h2 
  font-weight: normal;

.marketing .col-lg-4 p 
  margin-right: .75rem;
  margin-left: .75rem;



/* Featurettes
------------------------- */

.featurette-divider 
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */


/* Thin out the marketing headings */
.featurette-heading 
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) 
  /* Bump up size of carousel content */
  .carousel-caption p 
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  

  .featurette-heading 
    font-size: 50px;
  


@media (min-width: 62em) 
  .featurette-heading 
    margin-top: 7rem;
  

【问题讨论】：

有时在 css 中对图像使用 object-fit:cover 非常好，因为在较小的屏幕中允许图像裁剪，而在较大的屏幕中允许完整的图像。

【参考方案1】：

.img-fluid 是您使用的引导程序 4 的最佳选择。

【参考方案2】：

如果您删除类 d-none，则在调整窗口大小时会显示文本。以下是有关显示属性的更多信息：https://getbootstrap.com/docs/4.0/utilities/display/

【讨论】：

我已经按照您的建议删除了“d-none”类，现在出现了文本，但是当我缩小屏幕时，文本变得错位......我该如何解决这个问题？感谢您的帮助

【参考方案3】：

由于您使用引导库，他们有一个类来简化响应式图像，您所要做的就是将"img-responsive" 类包含到您拥有的图像中。 例如：

<img class="first-slide" class="img-responsive" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" >

【讨论】：

我试过写“img-responsive”，但没有用……然后，我使用了标签“img-fluid”并且可以工作！感谢您的帮助