html - 如何填充更改 Bootstrap 容器类

Question

我一直在尝试删除容器类为元素提供的 15px 填充。

HTML:

<div class="container body-container" id="mainContent">
     some stuff
</div>

CSS:

.container.body-container {
    padding: 0px;
    background-color: #FFFFFF;
}

我已经尝试了很多东西。我试过更改容器类本身并制作一个像这段代码一样的自定义容器类。在下图中，我正在查看代码和 chrome 中显示的填充。它显示容器元素周围有 15px 的填充。我希望所有填充都消失。

请求的整个 css 文件:

 body {
    overflow-x: hidden;
    background-color: #B47B10;
    font-size: 16px;
 }


#nameTitle{
    color: #003300;
    text-align: center;
}
#titleCaption{
    color: #B47B10;
    text-align: center;
    font-size: 16px;
}

#topBar{
    background-color: #B47B10;
}

#navBarLink{
    color: #B47B10;
}
#navBarLink:hover{
    color: #FFFFFF;
}

#myCarousel{
    background-color: #FFFFFF;
    max-width: 100%;
    position:relative;
    margin: 0px;
    border: 0px;
}

#cImage{
    max-height: 100%;
    max-width: 100%;
}
#wellItem{
    padding-top: 15px;
    background-color: #B47B10;
}
#wellItem:hover{
    background-color: #A46B00;
}

#invertedLink{
    color: #003300;
}
#invertedLink:hover{
    color: #FFFFFF;
}
.body-container {
    padding: 0px!important;
    background-color: #FFFFFF;
}
.carousel-caption {
    padding: 0px;

    position: relative;
    left: auto;
    right: auto;
}
.input-group{
    margin-right: 30px;
}
.multi-item-carousel{
  .carousel-inner{
    > .item{
        transition: 500ms ease left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }

    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }

  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}
.navbar-inverse {
  background-color: #003300;
  border-color: #080808;
}
@media(min-width:768px) {
    body {
        font-size: 20px;
    }
}

Answer 1

您的 CSS 工作正常。 我认为这是您导入文件的立场

像这样将 bootstrap.min.css 放在自定义的 css 文件之前

<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/my_style.css" rel="stylesheet"/>

位于底部的 css 文件将覆盖其他文件。 希望这会有所帮助

也可以是cache问题，因为该网站可以缓存在您的浏览器中。 所以清除缓存然后运行你的代码或者在隐身窗口中运行你的代码

.container.body-container{
  padding: 0px;
  background-color: #FF0000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  
<div class="container body-container" id="mainContent">
  some stuff
 </div>