Question

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

提前致谢

HTML PART：

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

Answer 1

如果您打开浏览器的元素检查器，您可以看到什么确切地覆盖了您的CSS规则以及如何避免它。所以，如果你看到这样的东西是用bootstrap.css写的：

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

为了覆盖它，您还应该使用媒体查询。例如：

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

Bootstrap的Jumbotron填充覆盖我的CSS

1 个答案: