Twitter Bootstrap 自定义 CSS 包含

当将自定义 css 与覆盖某些样式的 Twitter Bootstrap 一起使用时，将自定义 css 链接放置在引导响应式 css 之前还是之后更好？

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">

or

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

各自的优点和缺点是什么？

如果我在 bootstrap-responsive.css 之后编辑正文填充，如下所示：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

/* Add padding for navbar-top-fixed */
body {
  padding-top: 60px;
  padding-bottom: 40px;
}

然后我还必须使用媒体查询修复响应式布局，因为我已经覆盖了全局正文样式。

/* Fix to remove top padding for narrow viewports */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}

通常最好将自定义 CSS 放置在 Bootstrap CSS 之后。我想您希望自定义 CSS 覆盖 Bootstrap CSS。

将自定义样式放置在 Bootstraps 之后的优点是，您可以使用与 Bootstraps CSS 相同的选择器来更改在 Bootstraps CSS 中设置的任何内容。使改变小事情变得非常容易。如果您使用相同的选择器，则浏览器将使用应用于元素的最后规则。

我真的看不出将 Bootstrap CSS 放置在自定义 CSS 之后有任何优势，编写自己的样式然后用 Bootstrap 覆盖它们并没有多大意义......

例如，这不是引导 CSS，但如果您的 head 部分中有以下内容，它会以相同的方式工作：

<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />

Then in framework.css您有以下情况：

div.row {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 50px;
    padding: 15px;
}

但后来你意识到你想添加一个红色背景（为什么哦为什么......）并改变边框半径，你可以有以下内容custom-styles.css:

div.row {
    background-color: red;
    border-radius: 10px;
}

应用于该元素的 CSS 效果如下：

div.row {
    background-color: red;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 15px;
}

因为款式来自custom-styles.css覆盖现有的framework.css并且附加的也适用！ :)