Question

我正在创建一个django Web应用程序，其中包含base.html和base_bootstrap.html个文件。我的base_bootstrap.html文件包含以下两行以使用bootstrap CSS：

<!-- Bootstrap core CSS -->
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<!-- Custom styles for this template -->
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

我是否有办法修改以下css，以便在不创建单独的css文件的情况下将#999更改为#？

pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

Answer 1

使用内部CSS

您可以再次在HTML页面中再次声明颜色代码来覆盖颜色代码。

pre {
    border: 1px solid #999;
    page-break-inside: avoid
}
pre {
    border-color:#878;
}

您的预标签现在的边框颜色为＃878。

但是，如果您可以更改nativ颜色代码，请更改他。希望这会对你有所帮助。

Answer 2

您始终可以使用页面上的内部css 或内联css 专门覆盖HTML元素来覆盖external css。

示例：

.card
{
  margin:5px;
  padding:25px;
  border: 1px solid #999;
  display:inline-block;
  width:50px;
  background:#ddd;
}
.card{
  border:2px solid #f00;
}

<div class="card"></div>

您还可以使用!important覆盖HTML元素的任何css。

示例： border:2px solid black !important;

<强> DEMO

请参阅：https://css-tricks.com/specifics-on-css-specificity/

Answer 3

你可以下载SASS版本并修改你想要的部分，或者包含你想要的修改/额外样式的自定义文件，然后在安装了gem的情况下重建bootstrap，或者创建你自己的Grunt / Gulp脚本来构建SASS到CSS

https://github.com/twbs/bootstrap-sass

BS最初是在LESS中构建的，也可以使用。

在html文件中修改导入的引导代码

3 个答案: