Question

我想更改水平规则的颜色和大小，但是有自举默认样式。如何在不手动更改bootstrap css的情况下覆盖它？

 hr {
  background-size: 4px;
  border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;
  border: 4px;

}

Answer 1

只需在Bootstrap库后的之后放置自定义CSS工作表即可解决此问题

Answer 2

有三种方法可以将样式添加到<hr>元素。检查以下内容。您可以从样式中覆盖引导样式，如下所示。

PS：这个答案是所有可能性的一般答案

内联样式

<!--bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--Inline styling-->
<hr style="background-size: 4px; border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;">

内部样式表

<head>
<!--bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Internal Style sheet-->
<style>
hr {
  background-size: 4px;
  border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;
}
</style>
</head>

<body>

<hr>

</body>

外部样式表

hr {
  background-size: 4px;
  border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;
  background-color: red;
}

<!--bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<hr>

覆盖Twitter的Bootstrap <hr />样式

2 个答案: