如何獲取容器的背景顏色來覆蓋整個屏幕的寬度？

我是新來的HTML/CSS和實踐我試圖建立一個投資組合網頁。我在圖像中看到了兩個容器，在改變背景顏色時我想擺脫側面的空間。我嘗試着用填充和邊距來解決問題，但沒有成功。如何獲取容器的背景顏色來覆蓋整個屏幕的寬度？

有關如何解決此問題的任何想法？

html, 
 
body { 
 
    font-family: ; 
 
    margin: 0 auto; 
 
    text-transform: lowercase; 
 
} 
 

 
.container { 
 
    max-width: 940px; 
 
    margin: 0 auto; 
 
    padding: 0 !important; 
 
} 
 

 
.nav { 
 
    float: right; 
 
    display: inline; 
 
    margin: 0 auto; 
 
    list-style: none; 
 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    display: inline; 
 
    padding-top: 0; 
 
    padding-left: 10px; 
 
} 
 

 
.nav>li>a { 
 
    padding: 0px !important; 
 
    color: black; 
 
} 
 

 
a:hover { 
 
    background-color: yellow; 
 
} 
 

 
.header { 
 
    width: 100%; 
 
    display: inline-block; 
 
    padding: 10px 0 0 0; 
 
    margin: 0 auto; 
 
} 
 

 
.header h1 { 
 
    font-size: 20px; 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
} 
 

 
.header .nav { 
 
    padding-left: 10px; 
 
} 
 

 
.supporting h1 { 
 
    border-left: 1px solid black; 
 
    padding: 10px; 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 25%; 
 
} 
 

 
.supporting .container { 
 
    background-color: white; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.work .container { 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    background: rgba(225, 225, 225, .8) 
 
}

<html> 
 

 
<head> 
 
    <link href="style.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="js/main.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <div class="header"> 
 
     <h1 class="logo">header</h1> 
 
     <ul class="nav nav-pills"> 
 
     <li> 
 
      <a href="#">Projects</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Photography</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">blog</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="supporting"> 
 
     <div class="container"> 
 
     <h1>hi.</h1> 
 
     </div> 
 
    </div> 
 

 
    <div class="work"> 
 
     <div class="container"> 
 
     <h1>work</h1> 
 
     </div> 
 
    </div>

來源

2017-08-29 user8473431

我看不到圖像，實際上 – Kaddath

當使用.container引導給它一個特定width。你有兩個選擇，首先你可以使用.container-fluid而不是.container，這將使全寬容器（你只需要刪除一些填充）。

其次，你可以選擇包裝.container內.container-fluid

<div class = "container-fluid"> 

    <div class ="container"> 
     content goes here 
    </div> 

</div>

，然後在css你給的背景顏色.container-fluid不.container

div.container-fluid{ 

    padding-left:0px; 
    padding-right:0px; 
    background-color:red; 
}

來源

2017-08-29 14:33:52

嗯...試過，但不能改變填充。 – user8473431

檢查我編輯的答案與CSS包括 –

好吧，能夠實現它，但不得不使用！重要。我被告知這是真的推薦使用。 – user8473431

我認爲你應該檢查有關引導文件container-fluid這是管理全寬度容器的引導方式。

來源

2017-08-29 14:35:42

如何獲取容器的背景顏色來覆蓋整個屏幕的寬度？

回答

相關問題