Bootstrap的Jumbotron填充覆盖了我的CSS

jumbotron中的图像四周都有空格。当我减少CSS中的填充时，它将被Bootstrap CSS覆盖。！重要的是不工作。我的CSS文件在Bootstrap CSS之后。尝试了很多！请帮忙！Bootstrap的Jumbotron填充覆盖了我的CSS

在此先感谢

HTML部分：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="css/styles.css"> 
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 

<body> 
<header> 
    --- NAVBAR PART 
</header> 

<div id="main-content" class="container"> 
<div class="jumbotron"> 
    <img src="images/jumb1.jpg" alt="Pic1" class="img-responsive center-block"> 
</div> 
</div>

CSS：

.jumbotron { 
    padding-right: 10px; 
    padding-left: 10px; 
}

来源

2016-07-15 rashmi

如果你打开浏览器的元素督察，您可以看到究竟是什么将覆盖你的CSS规则以及如何避免它。所以，如果你看到正在写在bootstrap.css是这样的：

@media screen and (min-width: 768px) { 
.jumbotron { 
    padding: 48px 0; 
}

为了覆盖它，你应该使用一个媒体查询也是如此。例如：

@media screen and (min-width: 768px) { 
.jumbotron { 
    padding: 20px 10px; 
}

来源

2016-07-15 19:46:36 Mila

谢谢。但是这也不起作用。也试过了。但我只看到Inspect元素上的Bootstrap css。在CSS中添加了以下一段代码：@media screen和（min-width：768px）{ \t .container .jumbotron {padding-right：10px; padding-left：10px; } – rashmi

bootstrap css中的填充位于容器和容器流体类中：@media screen和（min-width：768px） .container .jumbotron，.container-fluid .jumbotron {0} {0} {0} padding-right：60px; padding-left：60px; }我试图包括自定义CSS中的这些容器。但结果是一样的。 – rashmi

请提供您问题的实例，以便我可以帮助您 – Mila

Bootstrap的Jumbotron填充覆盖了我的CSS

回答

相关问题