duanjupiao4730
2017-06-06 21:51 阅读 102
已采纳

bootstrap sidebar no bg color [关闭]

Hey i have tried a lot to give the background color of my sidebar from my bootstrap a color but it doesnt work.

here is my code from the page

<!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';
?>

Here is my code of my css file

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

Can you guys please help me ;)

thank you!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    drymoeuka282427675 drymoeuka282427675 2017-06-06 22:29

    You could use this code, but since the element is fixed you must give it a constant width property and so the responsiveness would probably be destroyed. Although you could use media queries to set when this element is visible. Underneath you have a fiddle.

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

    To eliminate the blank white space between navbar and top navbar remove top body padding

    body { 
        padding-left: 135px;
    }
    

    Updated the fiddle too :)

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

    点赞 评论 复制链接分享
  • dongsuyou6938 dongsuyou6938 2017-06-06 21:58

    I think you would actually need to set background: blue on the sidebar-nav class instead of the sidebar id

    点赞 评论 复制链接分享
  • dpo69086 dpo69086 2017-06-06 22:19

    Have a look at the below snippet i think you want something like this !

    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>

    </div>
    
    点赞 评论 复制链接分享

相关推荐