html - 无法覆盖 Bootstrap 的 CSS

Question

我只是想将容器的宽度设为百分比而不是 Bootstrap 默认的 940px。

我在 main.css 中的 CSS:

<style type=text/css>
    #main-container{
        width: 200px !important;
    }
</style>

我的 HTML:

<!--bootstrap-->
<link rel="stylesheet" type=text/css href="/static/css/bootstrap.css">
<script type=text/javascript src="/static/js/bootstrap.js"></script>
<!--custom css-->
<link rel="stylesheet" type=text/css href="/static/css/main.css">

<div class="container" id="main-container">
  <div class="row-fluid">
    <div class="span12">
      {% block body %}{% endblock %}
    </div>
  </div>
</div>

我可以通过在 HTML 的第 7 行手动修改样式的肮脏方法来更改宽度。所以我的猜测是某些东西优先于我的 CSS。

Bootstrap 本身似乎没有指定 !important 宽度。

在 bootstrap.css 的第 224 行:

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

回答:

删除了 main.css 中的标签。

Answer 1

删除 <style>来自 css 文件的标签。只有在 html 文件中嵌入 css 时才放置它们。