Question

我有一个引导轮播，其中每个轮播项目上我都使用图片和一些文字。我希望每个轮播项目都水平显示。但是引导轮播项目在垂直方向上显示了我的内容，如下图所示。

这是我目前得到的：

这就是我希望每个轮播项目看起来的样子：

这是我的源代码：（其中有两个轮播项目）

<div class="g-bg-img-hero" style="background-image: url(dist/images/newPage/svg-bg3.svg);">
    <div class="container g-py-50">
        <div class="row">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <div class="col-md-6 g-mb-0--md">
                            <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded"
                                 src="dist/images/newPage/biggest-expo-on-stem-cells-in-karachi.png" alt="Biggest Stem Cells Conference">
                        </div>
                        <div class="col-md-5">
                            <div class="mb-4">
                                <h4 class="g-color-black mb-3">$28m Funding Investment for New University of Unify Research</h4>
                                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                            </div>
                            <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-md-6 g-mb-0--md">
                            <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded"
                                 src="dist/images/newPage/hira-shaikh.jpg" alt="Nida Yasir Trust on AlKhaleej Clinics">
                        </div>
                        <div class="col-md-5">
                            <div class="mb-4">
                                <h4 class="g-color-black mb-3">$28m Funding Investment for New University of Unify Research</h4>
                                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                            </div>
                            <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
                        </div>
                    </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>
    </div>
</div>

Answer 1

好，您的结构不正确。每个轮播项目内部都需要具有以下结构：

.carousel> .carousel-item> .row> .col-4 + .col-6

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="g-bg-img-hero bg-info">
  <div class="container g-py-50">
    <div class="row">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <div class="row m-0 p-0">
              <div class="col-4 col-md-4 g-mb-0--md">
                <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded" src="https://via.placeholder.com/300x200" alt="Biggest Stem Cells Conference">
              </div>
              <div class="col-8 col-md-8">
                <h4 class="g-color-black mb-3">Item 1 - $28m Funding Investment for New University of Unify Research</h4>
                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
              </div>
            </div>
          </div>

          <div class="carousel-item">
            <div class="row m-0 p-0">
              <div class="col-4 col-md-4 g-mb-0--md">
                <img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded" src="https://via.placeholder.com/300x200" alt="Biggest Stem Cells Conference">
              </div>
              <div class="col-8 col-md-8">
                <h4 class="g-color-black mb-3">Item 2 - $28m Funding Investment for New University of Unify Research</h4>
                <p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
                <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
              </div>
            </div>
          </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>
  </div>
</div>

水平在两个单独的div中引导轮播项目内容

1 个答案: