滑塊區域外的 Bootstrap 4 beta 輪播箭頭

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

您使用了錯誤的課程：

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

Answer 2

我想確認G-Cyr 的解決方案，但指出一個問題，因此提出另一種解決方案。

問題如果您使用邊距值，您只會將元素移動到相對遠離其實際位置的位置。 由於輪播箭頭已向外移動，因此它們可能不可見。 如果滑塊是頁面上唯一的內容元素並且視口不利，就會出現這種情況。 見下圖：

在這里，箭頭是可見的，因為視口是有利的。

在這里，瀏覽器沒有切換到下一個斷點，因此當輪播箭頭從其原始位置移開時是不可見的。

解決方案：因此，我想提出一個基於 Bootstrap 提供的flex 類的解決方案。 首先，我們必須取箭頭的絕對位置（參見下面的 Css）。 然后我們將 HTML 文檔中的元素重新排列為 1) carousel-control-prev, 2) carousel-inner 和 3) carousel-control-next。 此外，我們必須將Flex 類添加到輪播容器中。 在我的示例中，這些是“d-flex justify-content-around 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>

注意：由於默認情況下箭頭是白色的，您可能需要對它們進行不同的着色。 在我的示例中，由於清晰，我沒有填充 Carousel 項目。 我願意接受改進建議。