【发布时间】：2018-02-12 04:55:11
【问题描述】：
我一直在编辑this code，所以它是 Bootstrap 4，它是左对齐的。而且我不知道如何解决两件事：
- 右侧总是被切掉，即使我希望它显示 100%
- 当您点击箭头 (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>【问题讨论】：
标签： css twitter-bootstrap carousel bootstrap-4