我试图在 Bootstrap 4 旋转木马中获得两列或网格

Question

所以我有一个不起作用的滑块示例，但我需要在滑块的幻灯片标题 div 中设置两个响应相等的列。这个想法是在一栏（左侧）中有一本待售的已发行书籍，旁边是解释该书的文字（右侧）。我试过添加另一个容器并围绕一个标题行，但无济于事。 css 属性 flex-flow: 列中的内容；不断搞乱其他幻灯片上的整个旋转木马。无论如何，我们将不胜感激。

Codepen

HTML

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-100 include-header"
        data-autoplay="7000" data-speed="650" data-loop="true">
        <div class="slider-inner">
    
            <div class="swiper-container swiper-parent">
                <div class="swiper-wrapper">
                    <div class="swiper-slide dark">
                        <div class="container">
                            <div class="slider-caption slider-caption-center">
                                <h2 data-animate="fadeInUp">Welcome to Canvas</h2>
                                <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you
                                    need for your Perfect Website. Choose from a wide range of Elements &amp; simply put
                                    them on our Canvas.</p>
                            </div>
                        </div>
                        <div class="swiper-slide-bg" style="background-image: url('images/slider/swiper/1.jpg');"></div>
                    </div>
                    <div class="swiper-slide dark">
                        <div class="container">
                            <div class="slider-caption slider-caption-center">
                                <h2 data-animate="fadeInUp">Beautifully Flexible</h2>
                                <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Looks beautiful &amp;
                                    ultra-sharp on Retina Screen Displays. Powerful Layout with Responsive functionality
                                    that can be adapted to any screen size.</p>
                            </div>
                        </div>
                        <div class="video-wrap">
                            <video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay
                                muted>
                                <source src='images/videos/explore.webm' type='video/webm' />
                                <source src='images/videos/explore.mp4' type='video/mp4' />
                            </video>
                            <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="container">
                            <div class="slider-caption">
                                <h2 data-animate="fadeInUp">Great Performance</h2>
                                <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">You'll be surprised to
                                    see the Final Results of your Creation &amp; would crave for more.</p>
                            </div>
                        </div>
                        <div class="swiper-slide-bg"
                            style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;">
                        </div>
                    </div>
                </div>
                <div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
                <div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
                <div class="slide-number">
                    <div class="slide-number-current"></div><span>/</span>
                    <div class="slide-number-total"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
    
        </div>
    </section>

CSS

.slider-caption {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  z-index: 20;
  max-width: 550px;
  color: #eee;
  font-size: 1.375rem;
  font-weight: 300;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  transition: top 0.3s ease;
  background: purple;
}

Answer 1

这应该可行，您可能需要添加额外的 CSS 以使图像看起来不错。

替换此代码：

<div class="slider-caption slider-caption-center">
                                    <h2 data-animate="fadeInUp">Welcome to Canvas</h2>
                                    <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you
                                        need for your Perfect Website. Choose from a wide range of Elements &amp; simply put
                                        them on our Canvas.</p>
                                </div>

使用此代码：

<div class="row d-inline-flex">
                       <div class="col-6">
                          <img src="http://via.placeholder.com/400x600">
                       </div>
                       <div class="col-6">
                          <div class="slider-caption slider-caption-center">
                             <h2 data-animate="fadeInUp">Name Of The Book</h2>
                             <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Very cool description about the book.</p>

                          </div>
                       </div>
                    </div>

额外CSS:

.d-inline-flex {
   display: inline-flex;
}

我试图在 Bootstrap 4 旋转木马中获得两列或网格

I am trying to get two columns or grids in Bootstrap 4 carousel

bootstrap-4

slider

carousel

owl-carousel