html - Bootstrap 4 slider + 文本。如何正确格式化？

Question

我正在尝试学习 Bootstrap 并稍微涉足 Web 开发，因此我挑战自己构建一个现有页面。

这是我正在尝试重建/“复制”的网站的链接: https://www.fahrradhaus-griesmann.de/

现在我的问题是，如何使用“Kontakt Impressum Datenschutz”等正确格式化右侧以获得对齐和响应能力？

我的部分 HTML 代码:

<div class="row">

                        <div class="sliderL col-xs-9">
                            <div id="slider" class="carousel slide" data-ride="carousel">

                                <!-- indicators dot nav -->
                                <ol class="carousel-indicators">
                                    <li data-target="#slider" data-slide-to="0" class="active"></li>
                                    <li data-target="#slider" data-slide-to="1"></li>
                                    <li data-target="#slider" data-slide-to="2"></li>
                                    <li data-target="#slider" data-slide-to="3"></li>
                                    <li data-target="#slider" data-slide-to="4"></li>
                                </ol>
                                <!-- wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="img/slideshow1.jpg" alt="slideshow1">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow2.jpg" alt="slideshow2">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow3.jpg" alt="slideshow3">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow4.jpg" alt="slideshow4">

                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="img/slideshow5.jpg" alt="slideshow5">

                                    </div>
                                    <!-- navigation controls -->
                                    <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="sliderR col-xs-3">
                            <div class="col-xs-12" id="sliderLink">
                                <nav class="navbar navbar-expand-md">

                                    <ul class="navbar-nav">
                                        <li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#">Impressum</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#">Datenschutz</a></li>
                                    </ul>

                                </nav>
                            </div>
                        </div>


                </div>
            </div>
        </div>

我的 CSS 代码:

.header-container {
    background-color: #055dae;
    padding-top: 35px;
}

.header-inner {
    padding-top: 15px;
    background-color: #ffffff;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.header-adresse {
    text-align: right;

}
.header-adresse p {
    margin: 0;
}
.sliderL {

    max-width: 70%;
}
.sliderR {
    background-color: #055dae;
    max-width: 30%;
    float: right;
}
.div#sliderLink.col-xs-12 {
    margin: 0;
    padding: 0;
}

Answer 1

如果您想模仿该部分(或行)如何对齐和响应，这需要将 Bootstrap 类应用于 slider 和右侧部分。

所以让我们首先分析一下行为。查看网站和来源，我确认了 3 种主要 View 尺寸的以下行为:

• 桌面 - slider 占 9 列，右侧占 3 列
• 平板电脑 - slider 占 8 列，右侧占 4 列
• 移动端 - slider 占 12 列，右侧隐藏

因此，使用您的 HTML 标记，您可以执行类似于以下完全由 Bootstrap 驱动的操作:

<div class="row">
      <div class="sliderL col-lg-9 col-md-8 col-xs-12">
       ...
       ...
      </div>
      <div class="sliderR col-lg-3 col-md-4 hidden-sm hidden-xs">
       ...
       ...
      </div>
</div>