Question

我正在尝试在我的网站中使用Bootstrap轮播，但无法将内容放在轮播中。我尝试使用Grid，但效果不佳。我怎么解决这个问题？请看一下我的代码和下面提供的图像。我尚未在轮播中使用任何CSS。

<section class="services-about">
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- The slideshow -->
                    <div class="carousel-inner">
                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="card-columns">
                                    <div class="card card-effects">
                                        <img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
                                            style="height: 10%; width: 15%;">
                                        <div class="card-body">
                                            <h3 class="card-title text-center" style="color: #686868 !important;">
                                                WEB DEVELOPMENT
                                            </h3>
                                            <hr style="border: .01px solid #333 !important;">
                                            <p class="card-text text-center"
                                                style="color: rgba(255,255,255,.755) !important;">Lorem
                                                ipsu dolor sit amet consectetur adipisicing
                                                elit.
                                                Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
                                                unde
                                                praesentium, quidem soluta incidunt enim dolore veritatis at quis
                                                molestias
                                                corporis
                                                quod inventore porro!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="card-columns">
                                    <div class="card card-effects">
                                        <img src="" alt="" class="img-fluid card-img-top">
                                        <div class="card-body">
                                            <h3 class="card-title text-center" style="color: #686868 !important;">
                                                MARKETING</h3>
                                            <hr style="border: .01px solid #333 !important;">
                                            <p class="card-text text-center"
                                                style="color: rgba(255,255,255,.755) !important;">
                                                Lorem
                                                ipsum dolor sit amet consectetur adipisicing
                                                elit.
                                                Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
                                                unde
                                                praesentium, quidem soluta incidunt enim dolore veritatis at quis
                                                molestias
                                                corporis
                                                quod inventore porro!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>

                    </div>
                </div>
                <div class="carousel-item">
                </div>
                <div class="carousel-item">
                </div>
        </div>

        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

        </div>
        </section>

Please check this image to see the carousel problem

Answer 1

您应该可以使用position来做到这一点。

如果添加：

.carousel-item {
   position: relative;
}

.card {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(50%, 50%);
}

您的内容应在幻灯片中间居中。：）

Answer 2

尝试以下一种方法。向卡添加style =“ margin：auto”

  <div class="card" style="width:400px; margin:auto;">

  <div class="carousel-caption">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    </div>
  </div>

Answer 3

由于您正在使用引导程序类：

尝试在父div元素上使用d-flex justify-content-center align-items-center。

此外，我强烈建议您停止使用CSS内联样式，并将CSS放入单独的文件中。

引导轮播无法正常工作

3 个答案: