我使用最新版本的bootstrap，有一個兩列的設計，第一列應該包含一些文本，第二列應該包含一個背景圖片，這個背景圖片填滿了整個列，直到用戶的右邊螢屏。我希望背景圖片能夠超出這一欄，向右移動，直到到達瀏覽器的邊緣。
像這樣：
我怎樣才能使第二列在容器外？這就是我目前使用的方法，但它并不奏效（影像被容器截斷）
<div class="container">
<div class=" row">
< div style="" class="col-sm-12 col-lg-6">
<p>示例文本</p>
</div>/span>
< div class="col-sm-12 col-lg-6 bg-image" style="background-image: url('http://placehold. it/1800x1045');">
</div>/span>
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
嘗試給背景圖片添加一個包含值。
style="background-image: url('http://placehold.it/1800x1045'); background-size: contain;"
uj5u.com熱心網友回復：
。<html>
<head>
<!-- 僅限CSS-->
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"/span>>
</head>
<body>
<div class="container-fluid" style="height: 500px;">
<div class="row h-100">
<div class="col-sm-6"/span> style="border: 1px solid pink;">
<div class="row">
<div class="container">
<div style="border: 1px solid blue;" class="col-sm-6 col-lg-6">
<p>示例文本</p>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
< div class="col-sm-6 col-lg-6 no-gutters bg-image" style="background-image: url('https://dummyimage. com/600x400/666/fff'); border: 1px solid red;">
</div>/span>
</div>/span>
</div>/span>
<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<!-- JavaScript Bundle with Popper -->/span>
< script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span> integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span> crossorigin="anonymous"/span>> </script>>
</body>
</html>/span>uj5u.com熱心網友回復：
你想做的事是Bootstrap沒有考慮到的，但你可以使用一個變通方法。為什么不考慮這個問題？因為對于一個 2 欄布局來說，它占用了 50% 的 div，而您要求的不是 50/50 的布局。
首先，無論是否為流體，容器都不會完全接觸頁面的側面。另外，在這兩種情況下，它都是對稱的，而你的設計卻不是。
所以......你想要做的是一個更大的 div，它占據了頁面的 100%，其中有一個容器（不管是不是流體）。通過絕對定位，您可以創建另一個占據大 div 的 50% 的 div，并將影像作為背景。
。. greater-container {
position: relative; //needed so that the .image-container can be properly positioned
}
.image-container {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
background-color: 綠色。
background-image: url（'http://placekitten.com/g/1800/1045'）。
background-size: cover;
z-index: 0;
}
.content-column {
border: 1px solid red; //so that we can see it
}< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="style sheet"/>/span>
<div class=" greater-container">/span>
<div class="image-container"> </div>>
<div class="container">/span>
<div class="col-sm-6 content-column"/span>>
Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet.
</div>/span>
</div>/span>
</div>/span>作為附帶說明，對于一個回應式網站來說，這并不是一個簡單的布局。那個背景影像將被經常調整大小，而且可能并不總是很好地作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/321898.html
標籤：
上一篇：使用strcpy后不列印字串