duanjupiao4730 2017-06-06 21:51
浏览 103
已采纳

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示