Question

当使用自定义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">

或

<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;
  }
}

Answer 1

通常最好在Bootstrap CSS之后放置自定义CSS。我想你想要自定义CSS覆盖Bootstrap CSS。

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

我无法看到在自定义CSS之后放置Bootstrap CSS的任何优点，编写自己的样式然后使用Bootstrap覆盖它们真的没有多大意义......

例如，这不是bootstrap CSS，但如果你的头部有以下内容，它的工作方式也是一样的：

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

然后在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中的现有样式，并且还会应用其他样式！：）

Answer 2

我认为如果你将style.css放在最上面，那么bootstrap样式会覆盖它。如果你把style.css放在底部，那么bootstrap样式将被你的自定义样式覆盖

Twitter Bootstrap自定义CSS包含

2 个答案: