我似乎无法弄清楚为什么它不适用于移动设备(似乎以616 px左右的像素显示底部滚动条)。试图弄清楚如何使它消失到iPhone和其他智能手机的至少414像素)。我尽可能地减少了代码,但是如果您需要更多代码上下文,请告诉我。



// JavaScript Document

$('#carouselExample').on('slide.bs.carousel', modCarousel);
$('#test').on('slide.bs.carousel', modCarousel);

function modCarousel (e) {

    var $e = $(e.relatedTarget),
        idx = $e.index(),
        itemsPerSlide = 3,
        $c = $e.closest('.carousel-inner'),
        totalItems = $('.carousel-item', $c).length;

    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item', $c).eq(i).appendTo($c);
            }
            else {
                $('.carousel-item', $c).eq(0).appendTo($c);
            }
        }
    }
};

@charset "utf-8";

#top-nav-row {
	background-color: #173A4F;
}
#bottom-nav-row {
	background-color: #242122;
}
body {
	background-color: #242122;
	font-family: 'Roboto', sans-serif;
	color: #EEEEEE;
}

#video-bg {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
}
video {
  display: block;
}
.video-container {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  position: static;
  top: 0;
  right: 0;
  z-index: -100;
  padding-top: 50px;
}
.overlay-desc {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-logo {
	max-height: 27%;
	width: 33%;

}
.main-top-nav {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	background-color: #173A4F;
}
.recent-pro-clip{
	padding-top: 50px;
	padding-left: 45px;
}
.recent-news{
	padding-top: 50px;
}
.no-pad {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar-toggler {
  border: none;
  outline: none;
}
.navbar-toggler-icon {
  border: none;
  outline: none;
}
.navbar-brand {
  padding-bottom: 13px;
}
.recent-news-desc {
	font-size: 0.8rem;
	text-align: center;
	font-weight: lighter;
	padding-bottom: 0px;
	background-color: #333333;
	padding-left: 0px;
	margin-left: 14px;
	margin-right: 14px;
	margin-bottom: 20px;
}



@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Font CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- MY CSS FILE-->
<link href="../css/main.css" rel="stylesheet">
<style type="text/css"></style>
</head>
<body>

<!-------------------------- START OF TOP RECENT EPISODES CAROUSELS CONTENT ----------------------------------->
<div class="container no-pad">
  <div class="row">
    <div class="col-md-9 no-pad">
      <div class="row">
        <div class="col-md-12 recent-pro-clip">
          <h3>Recent Projects</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="carouselExample" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
              <div class="carousel-item col-md-4 active">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
              </div>
            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>

          <!--------------------- START OF TOP RECENT CLIPS CAROUSELS CONTENT -------------------->
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 recent-pro-clip">
          <h3>Recent Clips</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="test" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
              <div class="carousel-item col-md-4 active">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
              </div>
            <a class="carousel-control-prev" href="#test" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#test" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
        </div>
        <!-- clips carsoel div -->
      </div>
    </div>
    <!-- recent projects and clips carousel overall col -->
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-12 recent-news">
          <h3>News</h3>
        </div>
      </div>
      <div class="row">
        <div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
      </div>
      <div class="row">
        <div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> <br/>
        </div>
      </div>
    </div>
    <!--overall news carousel col-->
  </div>
  <!-- overall carousel row -->
</div>
<!-- Container Div from Top -->

<!-------------------------- FOOTER ----------------------------------->
<div id="footer-fluid" class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col"> test </div>
    </div>
  </div>
</div>
<!-- container fluid -->

<!-------------------------- SCRIPTS ----------------------------------->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="../../js/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../js/my_js_main.js" crossorigin="anonymous"></script>
</body>
</html>

最佳答案

这是由以下规则引起的:

.no-pad {
    padding-right: 0px;
}


删除no-pad类,并使用响应式Bootstrap间隔类(例如px-md-0等)进行间隔。

10-05 22:59
查看更多