css - Bootstrap 旋转木马左对齐

Question

我一直在编辑this code所以它是 Bootstrap 4，它是左对齐的。我不知道如何解决两件事:

1. 右侧一直被切掉，即使我希望它显示 100%
2. 当您点击箭头 (carousel-control-prev) 时，在其他轮播元素滑动之前会出现一个空白区域

有人可以告诉我我做错了什么吗？这是我的代码:

$(document).ready(function() {
  $('#carouselExampleControls').carousel({
    interval: 0
  })
  $('.carousel .carousel-item').each(function() {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});

.carousel,
.carousel-inner,
.carousel-inner>.carousel-item {
  overflow: hidden;
}

.carousel-inner>.carousel-item.active,
.carousel-inner>.carousel-item-next {
  display: flex;
  flex-wrap: nowrap;
  width: auto;
}

.carousel-inner:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 94%;
  left: 0;
  content: "";
  display: block;
  background-color: #fff;
  z-index: 2;
}

.carousel-inner:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 100%;
  content: "";
  display: block;
  background-color: #fff;
  z-index: 2;
}

.carousel-control-prev {
  opacity: 1;
  background: black;
  height: 70px;
  width: 70px;
  top: 50%;
  left: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="coontainer-fluid">
  <div class="col-md-7 text-center">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
      <div class="carousel-inner">
        <div class="row carousel-item active">
          <div class="col-5">
            <div class="card">
              <div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
                <div class="d-inline">
                  <a href="#" class="card-link">Link</a>
                </div>
                <h5 class="card-title">Title</h5>
                <p class="card-text">Text goes here</p>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
              </div>
            </div>
          </div>
        </div>
        <div class="row carousel-item">
          <div class="col-5">
            <div class="card">
              <div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
                <div class="d-inline">
                  <a href="#" class="card-link">Link</a>
                </div>
                <h5 class="card-title">Title</h5>
                <p class="card-text">Text goes here</p>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
              </div>
            </div>
          </div>
        </div>
        <div class="row carousel-item">
          <div class="col-5">
            <div class="card">
              <div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
                <div class="d-inline">
                  <a href="#" class="card-link">Link</a>
                </div>
                <h5 class="card-title">Title</h5>
                <p class="card-text">Text goes here</p>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
              </div>
            </div>
          </div>
        </div>
        <div class="row carousel-item">
          <div class="col-5">
            <div class="card">
              <div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
                <div class="d-inline">
                  <a href="#" class="card-link">Link</a>
                </div>
                <h5 class="card-title">Title</h5>
                <p class="card-text">Text goes here</p>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
                <a href="#" class="btn btn-block text-left pl-0">Button</a>
              </div>
            </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>
      </a>
    </div>
  </div>
</div>

Answer 1

Bootstrap 基于 12 列网格。因此，如果您将需要的三张幻灯片分组为一行，并且每张幻灯片都有一个 col-4 类，它就可以解决您的问题。我还在 .carousel-inner > .carousel-item.active, .carousel-inner > 类中将 width:auto; 更改为 width: 100%; .carousel-item-next 。

<div class="container-fluid">
    <div class="row">
        <div class="col-12 text-center">
            <h3>Bootstap 4 Carousel</h3>
            <h6>Customized to advance a single slide, and reveal part of adjacent slides</h6>
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="row no-gutters carousel-item active">
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                    </div>
                    <div class="row no-gutters carousel-item">
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                    </div>
                    <div class="row no-gutters carousel-item">
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                    </div>
                     <div class="row no-gutters carousel-item">
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                        <div class="col-4">
                            <div class="d-inline">
                              <a href="#" class="card-link">Link</a>
                            </div>
                            <h5 class="card-title">Title</h5>
                            <p class="card-text">Text goes here</p>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                            <a href="#" class="btn btn-block text-center pl-0">Button</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 text-center py-3">
            <a class="left carousel-control mx-4 text-dark" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="right carousel-control mx-4 text-dark" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
    </div>
</div>

Here is a demo