请尝试以下风格

Question

我无法在bootstrap 3中更改左侧边栏背景颜色。我使用过！重要但没有任何反应。我使用过class或id但不能改变左侧边栏的背景颜色。我想改变左侧边栏的背景颜色。我使用过ID黑色但没有任何反应。请帮我！！！！！！！！！！！！！！！代码：

body {
  position: relative;
}

ul.nav-pills {
  top: 20px;
  position: fixed;
}

div.col-sm-9 div {
  height: 250px;
  font-size: 28px;
}

.bg-1 {
  background-color: #f1c40f;
}

.bg-1 ul li {
  color: #ecf0f1;
  font-family: 'Gugi', cursive;
  font-size: 20px;
}

.bg-2 {
  width: 82%;
}

.col-sm-3 {
  width: 18% !important;
}

#backg {
  background-color: #16a085 !important;
}

@media screen and (max-width: 810px) {
  #about,
  #education,
  #certifications,
  #skills,
  #projects,
  #experience,
  #interest {
    margin-left: 150px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row bg-1">
    <div class="col-sm-3 text-center" id="backg">
      <nav id="myScrollspy">

        <ul class="nav nav-pills nav-stacked ">
          <img class="img-rounded img-responsive center-block" src="naqqash.png" height="200" width="200">
          <li class="active"><a href="#about">ABOUT</a></li>
          <li><a href="#education">EDUCATION</a></li>
          <li><a href="#certifications">CERTIFICATIONS</a></li>
          <li><a href="#skills">SKILLS</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="#experience">EXPERIENCE</a></li>
          <li><a href="#interest">INTEREST</a></li>
        </ul>
      </nav>

    </div>

    <div class="col-sm-9 bg-2">
      <div id="about">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="education">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="certifications">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="skills">
        <h1>Section 4</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="projects">
        <h1>Section 5</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="experience">
        <h1>Section 6</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="interest">
        <h1>Section 7</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div>
        <h1>Section 7</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>

Answer 1

我刚刚复制了你的代码并将以下行添加到css：

ul.nav-pills {
        top: 20px;
        position: fixed;
        background-color:white;
        height:100%
    }

只需将background-color属性添加到左栏

即可

Answer 2

请尝试以下风格

    #backg ul{
      background-color: #16a085 !important;
    }

Answer 3

问题在于您正在使用col作为您想要留在左侧的侧边栏。使用col时会遇到麻烦。您可以尝试使用此代码来获得所需的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
    <style>
    body {
            position: relative;

    }

    div.col-sm-9 div {
            height: 250px;
            font-size: 28px;
    }
    .bg-1{
        background-color: #f1c40f;
    }
    .bg-1 ul li{
        color: #ecf0f1;
        font-family: 'Gugi', cursive;
        font-size: 20px;
    }
    .bg-2{


    }

    .col-sm-3 {

}
#backg{
    background-color: #16a085 !important;
}


    @media screen and (max-width: 810px) {
        #about, #education, #certifications, #skills, #projects, #experience, #interest  {

        }
    }
    </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div class="bg-1">
    <div class="row">
        <div class="col-sm-12">
            <div id="backg">
                <nav id="myScrollspy">
                    <ul class="nav nav-pills nav-stacked ">
                        <img class="img-rounded img-responsive center-block" src="naqqash.png" height="200" width="200">
                        <li class="active"><a href="#about">ABOUT</a></li>
                        <li><a href="#education">EDUCATION</a></li>
                        <li><a href="#certifications">CERTIFICATIONS</a></li>
                        <li><a href="#skills">SKILLS</a></li>
                        <li><a href="#projects">PROJECTS</a></li>
                        <li><a href="#experience">EXPERIENCE</a></li>
                        <li><a href="#interest">INTEREST</a></li>
                    </ul>
                </nav>
                <div class="colright bg-2">
                    <div id="about">    
                        <h1>Section 1</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>
                    <div id="education"> 
                        <h1>Section 2</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>        
                    <div id="certifications">         
                        <h1>Section 3</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>
                    <div id="skills">         
                        <h1>Section 4</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>      
                    <div id="projects">         
                        <h1>Section 5</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>
                    <div id="experience">         
                        <h1>Section 6</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>
                    <div id="interest">         
                        <h1>Section 7</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>
                    <div >         
                        <h1>Section 7</h1>
                        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

#myScrollspy {
  background-color: #ff0000;
  position: fixed;
  width: 300px;
  left: 0;
  top: 0;
}
.colright {
  margin-left: 300px;
}

我无法改变左侧边栏背景颜色？

3 个答案:

请尝试以下风格