Question

就像标题所说的那样，我的自定义CSS并没有覆盖bootstrap中的核心CSS。我正在关注this教程并尝试在导航栏下方添加更大的边距而没有运气。我也在使用Django，这是我的html文件：

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">
    <script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>


  </head>
  <body>
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Client Sign-In</a>
        </div>  
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Development</a></li>
                        <li><a href="#">Consulting</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<h1>Enter ID</h1>
<form method="POST" class= "post-form"> {% csrf_token %}
    {{ form.as_p }}
    <button type='submit' class="save btn-default">Save</button>
</form>

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
            <h3>Personal Training</h3>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        </div>
        <div class="col-md-4">
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
            <h3>Physiotherapy</h3>
            <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
        </div>
        <div class="col-md-4">
            <span class="glyphicon glyphicon-console" aria-hidden="true"></span>
            <h3>Boxing</h3>
            <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        </div>
    </div>
</div> 
</script>
  </body>
</html>

我的自定义CSS文件为bootstrap-override.css，其内容为：

.navbar {
    margin-bottom: 30; 
}

我尝试切换<link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">和<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">，当我将前者放在首位并尝试检查Chrome中的元素时，它会向我显示.navbar {margin-bottom: 30px;}已被划掉，这意味着它是被覆盖对吗？（旁边还有一个小图标，上面写着invalid property value）这与我想要的相反。当我切换它们以便我的自定义文件位于底部.navbar {margin-bottom: 30px;}时仍然被划掉。我在settings.py中将STATIC-URL变量设置为/static/。这似乎不是一个项目结构问题，因为Chrome控制台正在识别我的自定义代码。

Answer 1

它可能会说“无效的属性值”，因为30不是一个单位 - 它应该是30px。

如果仍然没有覆盖，你可以选择几个。

首先，Bootstrap中的CSS规则可能具有更高的特异性 - 您应该在浏览器Dev Tools中查看原始选择器是应用您尝试覆盖的边距的内容。例如，nav.navbar比.navbar更具体，并且即使它在CSS中更早出现，也会匹配更高的优先级。

如果所有其他方法都失败了，请将规则设为重要（尽管通常要避免这种情况，并严格禁止这些规则）：

.navbar {
    margin-bottom: 30px !important; 
}

Answer 2

你忘了在30岁之后写px吗？

.navbar {
    margin-bottom: 30px; 
}

或者您也可以尝试

.navbar {
    margin-bottom: 30px !important; 
}

如果仍然无效，则表示您的css文件链接不正确。

无法在引导程序中覆盖CSS

2 个答案: