gpt4 book ai didi

css - Bootstrap 的 Jumbotron 填充覆盖了我的 CSS

转载 作者:行者123 更新时间:2023-11-28 05:33:00 25 4
gpt4 key购买 nike

超大屏幕中的图像周围有空格。当我减少 CSS 中的填充时,它会被 Bootstrap CSS 覆盖。 !important 不起作用。我的 CSS 文件在 Bootstrap 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;
}

最佳答案

如果您打开浏览器的元素检查器,您可以看到到底是什么覆盖了您的 CSS 规则以及如何避免它。所以,如果你看到类似这样的东西被写在 bootstrap.css 中:

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

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

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

关于css - Bootstrap 的 Jumbotron 填充覆盖了我的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38403926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com