2017-10-26 4 views
1

Ich habe ein Text nur Karussell in Bootstrap 4 Beta. Wie kann ich die Pfeile außerhalb des Slider-Bereichs entfernen? Ich habe versucht, Google und hier zu suchen, habe aber nichts gefunden. Da das Karussell nur Text enthält, befinden sich die Karussellsteuerpfeile über einigen Textteilen.Bootstrap 4 Beta Karussell Pfeile außerhalb Slider Bereich

Hier ist mein Code. Ich habe auch sie 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> \t 
 
</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>

Antwort

0

Sie die falsche Klasse verwendet haben:

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

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

sollte sein: (erhöhte Marge)

.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> \t 
 
</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>

+0

Danke soviel !!! – mlegg