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>

Answer 2

尝试使用

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

或

<div class="container" style="padding:0!important" id="mainContent">
     some stuff
</div>

如何在更改引导容器类中填充

2 个答案: