向Bootstrap 3行/列添加全角圖像？
[英]Adding a full-width image to a Bootstrap 3 row/column?
問題描述
我有一個Bootstrap 3網格。
我需要添加一個960像素寬的標題圖像。
但是，如果我將其添加到行中，則通常在列上填充10px會“偏移”我的圖像，因為它不再“適合”：
我知道如何迫使它起作用，但是我想知道是否在BS3中缺少一些修飾符類來使它起作用。
而且，是的，我知道我可以使用css背景圖像，但是客戶端希望在那里有圖像。
6 個解決方案
解決方案1
1 2015-06-25 16:08:02
在您的CSS中添加一個類，以消除空白以在列中創建全角圖像，然后在該列之后添加該類。
.bosom-none {
margin-right: -15px; // Removes the right gap
margin-left: -15px; // Removes the left gap
}
<div class="container">
<div class="row">
<div class="colum-md-6 bosom-none">
<img src="your-image.jpg">
</div>
</div>
</div>
解決方案2
0 2014-03-29 17:56:12
您可能還有其他麻煩，因為如您所見，容器，行和img不會給您任何空白。
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
這是整個頁面
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background:green;">
<div class="row">
<img src="http://www.placehold.it/960x150">
</div>
<div class="row" style="background:red;">
Some other content
</div>
</div>
</body>
</html>
解決方案3
0 2016-09-07 09:20:42
這是我在Bootstrap中多次遇到的問題。 您基本上有三個選擇：
如果要將圖像放置在
.row內的一列（例如.col-sm-12）內，則必須對圖像或與該列的填充相等的父容器應用負邊距： http： //codepen.io/anon/pen/xEGkaQ您也可以改為使圖像（或環繞
div）成為.row的直接子級，但建議不要使用Bootstrap這樣做 。您可以將圖像全部移到.col / .row之外，賦予它自己的.container並擺脫該容器的填充： http ://codepen.io/anon/pen/WGvAap。
我通常會選擇選項＃1。
請注意，這不能回答您的問題。 它的意思是將其編寫為以后遇到相同問題的其他人（不知道如何使它起作用）的參考。
您問題的實際答案：不，Bootstrap不提供此類修飾符類。
解決方案4
-1 2015-05-17 17:06:30
只需將div class =“ container”替換為div class =“ container-fluid”
就是這樣！
解決方案5
-1 2016-02-22 19:40:50
您還可以創建一個類來覆蓋其中的容器。
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
然后將類添加到您的圖像。
解決方案6
-2 2014-03-29 18:05:41
將圖像放入span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>
具有 2 個不同背景（和 2 列）的 Bootstrap 全角
[英]Bootstrap full-width with 2 different backgrounds (and 2 columns)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.