Question

嘿，我已经尝试了很多，从我的引导程序给我的侧边栏的背景颜色一种颜色，但它不起作用。

这是我的代码来自页面

<!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;
}

你们能帮助我吗？）

谢谢你！

Answer 1

我认为您实际上需要在background: blue课程而不是sidebar-nav ID

上设置sidebar

Answer 2

看一下下面的片段，我想你想要这样的东西！

＆＃13;

removeClass()

＆＃13;

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;
}

＆＃13;

Answer 3

你可以使用这段代码，但由于元素是固定的，你必须给它一个恒定的宽度属性，因此响应性可能会被破坏。虽然您可以使用媒体查询来设置此元素何时可见。在你的下面，你有一个小提琴。

#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/

bootstrap sidebar no bg color

3 个答案: