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

从css文件中删除<style>标记。只有在html文件中嵌入css时才能使用它们。

Answer 2

然后专门给.container一个重要的200px宽度。尽可能地缩小范围。

无法覆盖Bootstrap CSS

2 个答案: