Bootstrap布局登錄頁面問題與flex容器和顯示背景影像-有解無憂

有一段時間，我一直在為一些非常痛苦的問題而苦苦掙扎。

我正在嘗試創建一個具有簡單布局的登錄頁面：

在寬度超過 800px 的螢屏上：

兩列
在左側，我想顯示徽標、登錄表單、文本框和按鈕。沒有背景影像。
在右側，我想顯示一個帶有背景影像的 div。

在小于或等于 800px 的螢屏上：

帶有徽標、登錄表單、文本框和按鈕的單列。
大螢屏右欄中顯示的背景影像應在小螢屏上顯示為該單列的背景影像。

html檔案

<div class="flex-container">
<div class="col-lg-4 index-top">
    <div class="row">
        <div class="col log-in">
            <div class="col no-padding">
                <h1>
                    <img src="/img/AnonimowySygnalista.svg" alt="logo Anonimowy Sygnalista" class="logo-login" />
                    <span class="sr-only hidden">Anonimowy sygnalista</span>
                </h1>
                <form action="">
                    <label for="">UserName</label>
                    <input type="" id="" name="" placeholder="Wpisz otrzymany login" class="input"></input>
                    <input type="submit" value="Zaloguj" class="btn-primary"></input>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-8 col background-img">
</div>

CSS檔案

.container {
    display: block;
    padding: 0;
    margin: 0;
}
.flex-container {
    display: flex;
    flex-direction: column;
}
input, textarea {
    display: block;
}
.right {
    float: right;
}
.left {
    float: left;
}
.clear {
    clear: both;
}
label {
    font-weight: 700;
    margin-bottom: .75rem;
}
.btn-primary {
    background-color: #1F7AAB;
    border-radius: 4px;
    border-color: #1F7AAB;
    padding: .5rem 1.5rem;
    width: 100%;
    box-shadow: none;
    color: #fff;
}
.background-img {
    background-image: url('../img/pexels-vlada-karpovich-4050312.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: -1.25rem;
}
.input {
    margin-bottom: 1.5rem;
    max-height: 5rem;
    padding: .5rem .5rem .5rem .75rem;
    border: 1px solid #767676;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
}
.log-in h1 {
    margin: 3rem 0;
}
.index-top {
    z-index: 999;
}
@media (min-width: 801px) {
    .container {
        width: 100% !important;
    }
    .flex-container {
        padding-right: 80px;
        flex-direction: row;
    }
    .index-top {
        margin: 0 80px;
    }

uj5u.com熱心網友回復：

將元素堆疊在一起使用 position : absolute

將它添加到.background-img@media 內部應該會產生效果，您還需要z-indexcss 屬性來管理哪個元素在哪個元素后面

uj5u.com熱心網友回復：

我相信您希望背景影像在大螢屏上顯示在右側，并且您希望背景影像在小螢屏上顯示在表單后面。

實作這一點的一種簡單方法是向.bg-sometimes小（左側）列添加一個 CSS 類。我們設定這個類來顯示背景影像。然后，在我們的中@media (min-width: 801px)，我們設定background-image: none;影像不在大螢屏上顯示。

下面的代碼很好地演示了這個實作。

 .container {
        display: block;
        padding: 0;
        margin: 0;
    }
    .flex-container {
        display: flex;
        flex-direction: column;
    }
    input, textarea {
        display: block;
    }
    .right {
        float: right;
    }
    .left {
        float: left;
    }
    .clear {
        clear: both;
    }
    label {
        font-weight: 700;
        margin-bottom: .75rem;
    }
    .btn-primary {
        background-color: #1F7AAB;
        border-radius: 4px;
        border-color: #1F7AAB;
        padding: .5rem 1.5rem;
        width: 100%;
        box-shadow: none;
        color: #fff;
    }
    .background-img {
        background-image: url('https://images.pexels.com/photos/235986/pexels-photo-235986.jpeg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        margin-top: -1.25rem;
    }
    .input {
        margin-bottom: 1.5rem;
        max-height: 5rem;
        padding: .5rem .5rem .5rem .75rem;
        border: 1px solid #767676;
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
    }
    .log-in h1 {
        margin: 3rem 0;
    }
    .index-top {
        z-index: 999;
    }

    .bg-sometimes {
        background-image: url('https://images.pexels.com/photos/235986/pexels-photo-235986.jpeg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        margin-top: -1.25rem;
    }

    @media (min-width: 801px) {
        .container {
            width: 100% !important;
        }
        .flex-container {
            padding-right: 80px;
            flex-direction: row;
        }
        .index-top {
            margin: 0 80px;
        }
        .bg-sometimes {
            background-image: none;
        }
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex-container">
    <div class="bg-sometimes col-lg-4 index-top">
        <div class="row">
            <div class="col log-in">
                <div class="col no-padding">
                    <h1>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg"
                             alt="logo Anonimowy Sygnalista" class="logo-login"/>
                        <span class="sr-only hidden">Anonimowy sygnalista</span>
                    </h1>
                    <form action="">
                        <label for="">UserName</label>
                        <input type="" id="" name="" placeholder="Wpisz otrzymany login" class="input"></input>
                        <input type="submit" value="Zaloguj" class="btn-primary"></input>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col background-img">
    </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330110.html

標籤：html css

上一篇：CSS僅用于第一個匹配元素

下一篇：根據內容調整邊框