html - 滑块区域外部的Bootstrap 4 Beta轮播箭头(Bootstrap 4 beta carousel arrows outside slider area)

Question

I made a text only carousel in Bootstrap 4 beta.

(我在Bootstrap 4 Beta中制作了仅文本轮播。)

How can I get the arrows off of the slider area, outside of it?

(如何使箭头离开滑块区域之外的区域？)

I tried searching Google and in here but came up with nothing.

(我尝试搜索Google，但在这里却一无所获。)

Since the carousel has only text, the carousel control arrows sit on top of some parts of the text.

(由于轮播仅包含文本，因此轮播控制箭头位于文本的某些部分的顶部。)

Here is all of my code.

(这是我所有的代码。)

I also added it to https://codepen.io/mlegg10/pen/wrLJVN

(我也将其添加到https://codepen.io/mlegg10/pen/wrLJVN)

 .carousel { margin: 1.5rem; } .carousel-inner { height: auto; } .carousel-control.left { margin-left: -25px; } .carousel-control.right { margin-right: -25px; } 

 <script src="https://use.fontawesome.com/a0aac8df13.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-6 active"> <blockquote class="blockquote"> <p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p> <footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br> Tucson Convention & Visitors Bureau</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p> <footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br> Odyssey Foods, LLC</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote text-center"> <p>&quot;Our Most Concise Training To Date!</p> <footer class="blockquote-footer"><cite>John Comeau<br> Mohegan Sun Casino</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Several Commented On How Mr. Scott Conveyed A Sense of Understanding And Genuine Desire To Provide Them With Concrete And Realistic Answers To The Questions And Concerns.</p> <footer class="blockquote-footer"><cite>Maria Meza, Training & Development Manager<br> Tohono O'odham Gaming Authority</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>It Was One Of The Best Trainings I've Ever Seen. Our Gaming Board Attended A Session And Just Loved It!</p> <footer class="blockquote-footer"><cite>Marcus Diaz, Director of Training<br> Casino Del Sol</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced!</p> <footer class="blockquote-footer"><cite>Robert Taschetta, Help Desk Manager<br> Best Western International</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>The Feedback That I Received From The Employees Was Overwhelming...The Information You Passed On & Taught Them Was Invaluable. I Have Seen Many Of The Golden Eagle Distributors Employees Use A Wide Variety Of The Techniques That You Taught On A Daily Basis & People Are Thinking About Their Actions.</p> <footer class="blockquote-footer"><cite>Richard H. Wortman, Corporate Training Director<br> Golden Eagle Distributors</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team.</p> <footer class="blockquote-footer"><cite>Lynn W. Smith, General Manager<br> Smuggler's Inn</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>I Was Skeptical About This Experiential Training, But It Was Phenomenal!</p> <footer class="blockquote-footer"><cite>Ana Zysko, Director of Training<br> Inn Of The Mountain Gods Resort & Casino</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Peter Scott's Programs Are All About Content & Core Values.</p> <footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br> Barona Resort & Casino</cite></footer> </blockquote> </div> </div> <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i> <span class="sr-only">Next</span> </a> </div> </div> <div class="clearfix"></div> 

  ask by mlegg translate from so

Answer 1

you have used the wrong class :

(您使用了错误的类：)

.carousel-control.left {
  margin-left: -25px;
}

.carousel-control.right {
  margin-right: -25px;
}

should be :(increased margin)

(应为：（增加的边距）)

.carousel-control-prev {
  margin-left: -100px;
}

.carousel-control-next {
  margin-right: -100px;
}

---

demo:

(演示：)

 .carousel { margin: 1.5rem; } .carousel-inner { height: auto; } .carousel-control-prev { margin-left: -100px; } .carousel-control-next { margin-right: -100px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/a0aac8df13.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-6 active"> <blockquote class="blockquote"> <p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p> <footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br> Tucson Convention & Visitors Bureau</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p> <footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br> Odyssey Foods, LLC</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote text-center"> <p>&quot;Our Most Concise Training To Date!</p> <footer class="blockquote-footer"><cite>John Comeau<br> Mohegan Sun Casino</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Several Commented On How Mr. Scott Conveyed A Sense of Understanding And Genuine Desire To Provide Them With Concrete And Realistic Answers To The Questions And Concerns.</p> <footer class="blockquote-footer"><cite>Maria Meza, Training & Development Manager<br> Tohono O'odham Gaming Authority</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>It Was One Of The Best Trainings I've Ever Seen. Our Gaming Board Attended A Session And Just Loved It!</p> <footer class="blockquote-footer"><cite>Marcus Diaz, Director of Training<br> Casino Del Sol</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced!</p> <footer class="blockquote-footer"><cite>Robert Taschetta, Help Desk Manager<br> Best Western International</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>The Feedback That I Received From The Employees Was Overwhelming...The Information You Passed On & Taught Them Was Invaluable. I Have Seen Many Of The Golden Eagle Distributors Employees Use A Wide Variety Of The Techniques That You Taught On A Daily Basis & People Are Thinking About Their Actions.</p> <footer class="blockquote-footer"><cite>Richard H. Wortman, Corporate Training Director<br> Golden Eagle Distributors</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team.</p> <footer class="blockquote-footer"><cite>Lynn W. Smith, General Manager<br> Smuggler's Inn</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>I Was Skeptical About This Experiential Training, But It Was Phenomenal!</p> <footer class="blockquote-footer"><cite>Ana Zysko, Director of Training<br> Inn Of The Mountain Gods Resort & Casino</cite></footer> </blockquote> </div> <div class="carousel-item col"> <blockquote class="blockquote"> <p>Peter Scott's Programs Are All About Content & Core Values.</p> <footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br> Barona Resort & Casino</cite></footer> </blockquote> </div> </div> <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i> <span class="sr-only">Next</span> </a> </div> </div> <div class="clearfix"></div>