Question

我在Bootstrap 4 beta中制作了一个纯文本旋转木马。如何从滑块区域中取出箭头？我试着搜索谷歌，但在这里却什么也没找到。由于旋转木马只有文本，旋转木马控制箭头位于文本的某些部分的顶部。

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

你使用了错误的类：

sudo bash -c 'add-apt-repository -y ppa:certbot/certbot;apt-get update;apt-get upgrade -y;apt-get install -y software-properties-common python-certbot-nginx nginx;sed -i "s/server_name .*;/server_name $2;/" /etc/nginx/sites-available/default;systemctl restart nginx.service'

应该是:(增加保证金）

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

Answer 2

我想确认G-Cyr's解决方案，但指出一个问题，因此提出另一种解决方案。

问题如果使用边距值，则只能将元素相对地移离其实际位置。由于轮播箭头已向外移动，因此它们可能不可见。如果滑块是页面上唯一的内容元素，并且视口不利，就是这种情况。参见下面的图片：

在这里，箭头是可见的，因为视口是有利的。

在这里，浏览器没有切换到下一个断点，因此轮播箭头从其原始位置移开时不可见。

解决方案： 因此，我想提出一个基于Bootstrap提供的flex classes的解决方案。首先，我们必须采用箭头的绝对位置（请参见下面的Css）。然后，我们将HTML文档中的元素重新排列为1）carousel-control-prev，2）carousel-inner和3）carousel-control-next。另外，我们必须将Flex classes添加到轮播容器中。在我的示例中，这些是“ d-flex调整内容围绕align-items-center”类。为了确保箭头在滑块的整个高度上都是可单击的，您必须为它们指定“ align-self-stretch”类。这是我的示例：

Css

.carousel-control-prev, .carousel-control-next {
    position: inherit;
}

HTML

<div id="word-carousel" class="carousel slide d-flex justify-content-around align-items-center" data-ride="carousel" data-interval="false">
    <a class="carousel-control-prev align-self-stretch" href="#word-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">
        </div>      
    </div>
    <a class="carousel-control-next align-self-stretch" href="#word-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

注意事项：由于默认情况下箭头为白色，因此您可能必须使用不同的颜色。在我的示例中，由于清晰，我没有填充轮播项目。我愿意提出改进建议。

滑块区域外的Bootstrap 4 beta轮播箭头

2 个答案: