如何在移动视图中将 2 个引导轮播并排放置？答案

【问题标题】：How to place 2 bootstrap carousel next to each other in mobile view?如何在移动视图中将 2 个引导轮播并排放置？
【发布时间】：2020-12-29 15:53:56
【问题描述】：

我是 HTML 新手，我正在尝试让轮播显示在彼此旁边，就像在图片中一样，但我似乎无法让它工作。这是我的代码。轮播可以工作，但我需要它在移动视图上并排显示。是网格问题吗？？谁知道怎么解决，谢谢！非常感谢您的帮助。

想要的输出

              <div class="row">
                <div class="col-md-6">
                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img class="d-block w-100" src="img/vege.jpg" alt="First slide">
                        <div class="carousel-caption d-none d-md-block">
                          <h5>Vegetables</h5>
                          <p>Producing more but consuming less</p>
                        </div>
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="img/vege-red.jpg" alt="Second slide">
                        <div class="carousel-caption d-none d-md-block">
                          <h5>Red Label</h5>
                          <p>Vegetables Wine Industry</p>
                        </div>
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="img/vege-green.jpg" alt="Third slide">
                        <div class="carousel-caption d-none d-md-block">
                          <h5>Broccoli</h5>
                          <p>Chemistry: Taste like Chicken</p>
                        </div>
                      </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
                </div>
                
              <div class="col-md-6">
                <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img class="d-block w-100" src="img/farm-01.jpg" alt="First slide">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Aquaphonics</h5>
                        <p>Producing without farm lot</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="img/farm-02.jpg" alt="Second slide">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Modern Farm tools</h5>
                        <p>Building and Growing Crops</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="img/farm-03.jpg" alt="Third slide">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Science of Farming</h5>
                        <p>Botany, Biology, Chemistry</p>
                      </div>
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators2" 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="#carouselExampleIndicators2" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
                </div>
              </div>
            </div> ```

【问题讨论】：

标签： html css twitter-bootstrap carousel

【解决方案1】：

您可以添加 col-* 类来调整移动视图中的列。此外，您甚至不需要编写 col-md-*，因为 col-* 会影响所有视图。在本例中，它将是 class="col-6"。

<div class="container">
 <div class="row">
  <div class="col-6">

  </div>
  <div class="col-6">

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

【讨论】：