Question

我正在尝试使用Bootstrap4编写一个网页，该网页分为两个部分：图像和带有一些文字的部分。我想要两个显示器，一个用于大屏幕，一个用于小屏幕。在大屏幕上，图像应在左侧全屏显示，而在右侧书写。在小屏幕上，图像应在顶部显示为全屏，而在底部显示为文字。

这是我使用的HTML代码

<div class="d-md-flex h-md-100 align-items-center">

<!--div class="container txt-center no-gutters"-->

    <div class="col-lg-6 col-md-12 p-0 h-md-100">
        <div class="d-md-flex h-100 p-0">
            <img class="full-image" src="static/img/image.jpg">
        </div>
    </div>

    <div class="col-lg-6 col-md-12 p-0 h-md-100">
        <div class="d-md-flex align-items-center h-md-100 p-0 justify-content-center">
            <h1>Title</h1>
        </div>
    </div>

</div>

还有一个CSS

@media (min-width: 768px) {
    .h-md-100 { height: 100vh; }
}

.full-image {
    height: 100%;
    width: 100%;
    display: table;
    vertical-align: middle;
}

这是Bootply链接：https://www.bootply.com/rUCooLi5el

垂直分离到水平分离与整个图像

0 个答案: