html - Bootstrap 4 beta 旋转木马 slider 区域外的箭头

Question

我在 Bootstrap 4 beta 中制作了一个纯文本轮播。我怎样才能让箭头离开 slider 区域，在它之外？我试着在谷歌和这里搜索，但一无所获。由于轮播只有文本，轮播控制箭头位于文本某些部分的顶部。

这是我所有的代码。我也把它添加到 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>    

Answer 1

你用错类了:

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

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

应该是:(增加边距)

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

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

---

演示:

.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>