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

如果要模拟该部分（或行）的对齐方式和响应方式，则需要将引导程序类同时应用于滑块和右侧部分。

因此，让我们首先分析行为。通过查看网站和源，我确认了以下三种主要视图尺寸的行为：

桌面-滑块占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>

Bootstrap 4滑块+文字。如何正确格式化？

1 个答案: