bootstrap側欄沒有bg顏色

嘿，我已經嘗試了很多給我的側欄從背景顏色的顏色，但它不起作用。bootstrap側欄沒有bg顏色

這裏是我的代碼從頁面

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>ToolsForEver</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1""> <!-- een viewport is de userscreen dus we gebruiken 100% normale zoom --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <link rel="stylesheet" type="text/css" href="../style.css"> 
</head> 

<body> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Dit is voor de logo en dat de je een kleine soort dropdown ziet waarmee je op kleinere toestellen ook beter kan besturen --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="../afbeeldingen/tools.png">ToolsForEver</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">contact <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> <a href="uitloggen.php" class="btn btn-info" role="button">Uitloggen</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 

</nav> 
      <!-- Sidebar --> 
     <div id="sidebar"> 
      <ul class="sidebar-nav"> 
       <li> 
        <a href="#">Beheer Voorraad</a> 
       </li> 
       <li> 
        <a href="#">Beheer Medewerkers</a> 
       </li> 
       <li> 
        <a href="#">Beheer Locaties</a> 
       </li> 
       <li> 
        <a href="#">Beheer Voorraad</a> 
       </li> 
       <li> 
        <a href="#">Beheer Voorraad</a> 
       </li> 
      </ul> 
     </div> 

<div class = "container"> 
    <div class = "jumbotron"> 
     <img src="../afbeeldingen/toolsforever.jpg" alt="ToolsForever" class="img-responsive"> 
    </div> 
</body> 
</html> 


<?php session_start(); 
//als session leeg is dan doe je dit 
if(empty($_SESSION['email'])) 
{ 
    header("location:../index.php"); 
} 

    include 'footer.php'; 
?>

這裏是我的我的CSS文件的代碼

body { 
    padding-top: 65px; 
    padding-left: 135px; 
} 

.container{ 
    padding-top: 65px; 
    padding-left: 135px; 
} 



#sidebar{ 
    position: fixed; 
    left: 250px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    color: blue; 
} 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: black; 
}

你們能幫幫我;）

謝謝！

來源

2017-06-06 EazyNation

#sidebar {背景色：不管你想要什麼;} – orbit

不工作我已經嘗試過 – EazyNation

你可以使用此代碼，但由於元件是固定的，你必須給它一個恆定的寬度財產等的響應可能會被破壞。儘管您可以使用媒體查詢來設置此元素何時可見。在你的下面有一個小提琴。

#sidebar{ 
    position: fixed; 
    left: 250px; 
    width: 200px; 
    min-height: 100vh; 
    background-color:red; 
    margin-left: -250px; 
    color: blue; 
}

爲了消除導航欄和頂部導航欄中的空白空間除去機身頂部填充

body { 
    padding-left: 135px; 
}

更新了小提琴太:)

https://jsfiddle.net/wje3t8f0/3/

來源

2017-06-06 22:29:41

這是好的，但如何填補上面的空白間距？在側邊欄和導航欄之間 – EazyNation

你的css寫得不好，你應該重寫它，如果似乎合理，這只是骯髒的修復:) –

如果你刪除填充頂部那麼文本將在導航欄 – EazyNation

我想你實際上需要設置background: blue在sidebar-nav類，而不是sidebar ID

來源

2017-06-06 21:58:10 joshsisley

是的，但是然後你得到這樣的東西https://gyazo.com/faa6148a68e4 91926d1651fa0db99ce1，我希望它是整個側邊欄 – EazyNation

的看一看下面的代碼片段，我認爲你想這樣的事情！

body{ 
 
    margin:0px; 
 
} 
 
.left-side{ 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    width: 20%; 
 
    height: 100vh; 
 
    overflow:auto; 
 
    background-color:red; 
 
} 
 

 
.right-side{ 
 
    position:relative; 
 
    width: 80%; 
 
    margin:0px; 
 
    margin-left:20%; 
 
    min-height: 100vh; 
 
    background-color:blue; 
 
}

<div class="left-side"> 
 
    <ul> 
 
    <li>item 1</li> 
 
    <li>item 1</li> 
 
    <li>item 1</li> 
 
    <li>item 1</li> 
 
    <li>item 1</li> 
 
    <li>item 1</li> 
 
    <li>item 1</li><li>item 1</li> 
 
    <li>item 1</li> 
 
    </ul> 
 
</div> 
 

 
<div class="right-side"> 
 
    Content container 
 
</div>

來源

2017-06-06 22:19:04

bootstrap側欄沒有bg顏色

回答

相關問題