Bootstrap 4 Slider+Text.如何正确格式化

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

如果您想模拟该部分(或行(在对齐和响应方面的行为，这需要将引导程序类应用于滑块和右侧部分。

因此，让我们首先分析行为。查看网站和来源，我确认了以下3种主要视图大小的行为：

• 桌面-滑块占用9列，右侧占用3列
• 平板电脑-滑块取8列，右侧取4列
• 移动-滑块占据12列，右侧隐藏

因此，对HTML进行标记，您可以执行类似于以下完全由引导程序驱动的操作：

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