我无法在使用 bootstrap 时设置 <hr> 的样式

Question

我不能在 h1 和按钮之间设计我的 hr 标签，如果我使用旧版本的 bootstrap 是有效的，但 5.0.0 不是。


    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
        <hr>
        <button class="btn btn-primary btn-xl">Find out more</button>
      </div>
      </div>     
  </body>
</html>

这是风格sheet

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  background-size: cover;
}
}
hr{
  border-color: #F05F44;
  border-width: 3px;
  max-width: 65px;

Answer 1

您需要覆盖 bootstrap 样式。这可以通过在样式上使用 !important 来完成。

body,
html {
    background: url(header.jpg) no-repeat center center fixed;
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    width: 100vw;
}

hr {
    border-color: #F05F44 !important;
    height: 3px !important;
    max-width: 65px !important;
}

<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
    <div class="row">
        <h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
        <hr>
        <button class="btn btn-primary btn-xl">Find out more</button>
    </div>
</div>

Answer 2

执行 hr.<className> 以编辑任何 hr 标签

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

    <title>Hello, world!</title>
  </head>
<style>
body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  background-size: cover;
}
hr.new1 {
  border-top: 1px solid red;
}

/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;
}

/* Dotted red border */
hr.new3 {
  border-top: 1px dotted red;
}

</style>
  <body>

      <div class="row">
        <h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
        <hr class="new1">
        <hr class="new2">
        <hr class="new3">
        <button class="btn btn-primary btn-xl">Find out more</button>
      </div>

  </body>
</html>

我无法在使用 bootstrap 时设置 <hr> 的样式

I can't style a <hr> while using bootstrap

css

overriding

twitter-bootstrap