Bootstrap Sidebar nein bg Farbe

Hey ich habe viel versucht, um die Hintergrundfarbe meiner Sidebar von meinem Bootstrap eine Farbe zu geben, aber es funktioniert nicht.Bootstrap Sidebar nein bg Farbe

hier ist mein Code von der Seite

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

Hier ist mein Code meiner CSS-Datei

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

Könnt ihr mir bitte helfen;)

es Ihnen danken!

Quelle

2017-06-06 EazyNation

#sidebar {background-color: was auch immer Sie wollen;} – orbit

funktioniert nicht ich habe es bereits versucht – EazyNation

könnten Sie diesen Code verwenden, aber da das Element befestigt ist, Sie muss eine konstante Breite Eigenschaft geben und so würde das Ansprechverhalten wahrscheinlich zerstört werden. Sie können zwar Medienabfragen verwenden, um festzulegen, wann dieses Element sichtbar ist. Darunter hast du eine Geige.

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

Um den leeren weißen Raum zwischen navbar und Top-navbar entfernen oben Körperpolster

body { 
    padding-left: 135px; 
}

die Geige Aktualisiert zu beseitigen :)

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

Quelle

2017-06-06 22:29:41

Das ist gut, aber wie man den leeren weißen Abstand oben füllt? zwischen der sidebar und navbar – EazyNation

Ihre css ist schlecht geschrieben, sollten Sie es umschreiben, wenn plausibel, das sind nur schmutzige Fixes :) –

Wenn Sie die Polsterung-top entfernen, dann wird der Text unter der Navbar sein – EazyNation

Ich glaube, Sie würden tatsächlich background: blue auf der sidebar-nav Klasse anstelle der sidebar id

Quelle

2017-06-06 21:58:10 joshsisley

ja, aber dann bekommen Sie etwas wie diese https://gyazo.com/faa6148a68e4 91926d1651fa0db99ce1 und ich möchte, dass es die ganze Sidebar ist – EazyNation

Werfen Sie einen Blick auf die folgenden Code-Schnipsel einstellen muss ich denken, dass Sie so etwas wie dies wollen!

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>

Quelle

2017-06-06 22:19:04

Bootstrap Sidebar nein bg Farbe

Antwort

Verwandte Themen