重寫引導程序容器寬度

我有一個簡單的HTML模板使用引導程序3.模板具有以下結構：靜態頁眉，靜態頁腳和引導程序的類「容器」中的內容。在內容的中間，我有bootstrap'w「好」，我希望它看起來像頁眉和頁腳。我的意思是我希望它成爲任何屏幕上屏幕的整個寬度。重寫引導程序容器寬度

我創建容易fiddle.

這裏有一個問題，有沒有什麼辦法來覆蓋這個容器內的容器的寬度是多少？

<header> 
    <div class="container"> 
     <div class="content"> 

     </div> 
     <div class="well"> 

     </div> 
     <div class="content"> 

     </div> 
    </div> 
<footer>

enter image description here

來源

2014-04-10 user3127896

我很困惑......你想'.well'擴展到屏幕的邊緣？ –

爲什麼不在'.well'之前關閉'.container'並在之後打開它？我的意思是，從'.container'中刪除'.well'。 –

爆炸藥丸，加深瞭解更多圖片 – user3127896

ORIGINAL +最佳實踐：總是移動。好.container外面呆習慣與引導

UPDATE +若以上是不是一種選擇：既然你不能輕易修改.container樣式和/或移動.well以外的.container，你最好的選擇是JavaScript。在這裏，我製作了一個腳本，可以隨着窗口寬度的變化而擴展。

http://jsfiddle.net/iamnotsam/E3RQp/1/

的想法是，你想要一個負值的margin-left和margin-right使.well在屏幕上展開。

來源

2014-04-10 18:55:21 iamnotsam

這對我沒有用。問題是，必須只有一個類Container。所有的div都在這個課堂內。原因我有一個具有Container類的佈局模板，並將其粘貼到其他頁面的此佈局內容中。 – user3127896

明白了。我正在更新我的答案。一秒 – iamnotsam

謝謝！那就是我在找的東西！ – user3127896

div container具有以下在媒體查詢中指定的max-width作爲bootstrap的默認值。

@media (min-width: 768px){ 
    .container{ 
    max-width:750px; 
    } 
} 

@media (min-width: 992px){ 
    .container{ 
    max-width:970px; 
    } 
}

要覆蓋此添加下面的風格樣式表

//這應該在默認樣式添加，沒有在媒體查詢 .container { 保證金：0; 填充：0; }

@media (min-width: 768px){ 
    .container{ 
    max-width:100%; 
    } 
} 

@media (min-width: 992px){ 
    .container{ 
    max-width:100%; 
    } 
}

來源

2014-04-10 18:59:53 James

這裏那裏有一個這就像一個魅力簡單的把戲：https://css-tricks.com/full-width-containers-limited-width-parents/

查找：「不計算（）需要」

HTML

<header> 
    <div class="container"> 
     <div class="content"></div> 
     <div class="well full-width"></div> 
     <div class="content"></div> 
    </div> 
    <footer>

CSS

.full-width { 
    width: 100vw; 
    position: relative; 
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw; 
}

來源

2017-09-17 13:56:33 Gonzalo

這很好，除了我必須設置寬度：99。4vw所以它沒有離開頁面，爲什麼？但是，一旦縮小屏幕尺寸，其關閉的百分比就會變得更大。 – ganders

重寫引導程序容器寬度

回答

相關問題