<hr> 标签未根据 Bootstrap 版本显示答案

【问题标题】：<hr> tag not showing based on Bootstrap version<hr> 标签未根据 Bootstrap 版本显示
【发布时间】：2021-07-08 09:19:14
【问题描述】：


<head>
    <title>Startup</title>

    <!-- Required meta tags -->
    <!-- Recommended to always add them -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->

    <!-- Allows <hr> tag to be seen 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
    -->

    <!-- Prevents <hr> tag from being shown -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- Your own stylesheet -->
    <!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

您好，我是学习 html、css 和 bootstrap 的新手。我遇到了一个特殊的

标签不会出现。事实证明，我用来接收引导 CSS 的链接是问题所在。

我尝试过：将 hr 的 css 属性更改为不同的颜色（仍然不会显示）。问题被隔离到引导程序的链接。不寻常的是它不适用于第二个链接作为引导程序 5.0.2，但它适用于第一个链接引导程序 4.3.1。

我也尝试过标记

css 属性作为 !important 在我自己的样式表上放置在引导 css 下方。

感谢您的帮助^_^。

<!DOCTYPE html>
<html>

<head>
    <title>Startup</title>

    <!-- Required meta tags -->
    <!-- Recommended to always add them -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->

    <!-- Allows <hr> tag to be seen 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
    -->

    <!-- Prevents <hr> tag from being shown -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


    <!-- Your own stylesheet -->
    <!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!-- 
        h-100 means you want the container to span the entire height of page
        Hence, you can get the the items aligned within the container at its center.
    -->
    <div class="container d-flex align-items-center h-100">

        <div class="row">

            <!-- 
                Use col-12 since bootstrap grid system has 12 slots per row
                using col-12, ensures your div spans the entire row.
            -->
            <header class="text-center col-12">
                <h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
            </header>

            <div class="buffer col-12"></div>

            <section class="text-center col-12">
                <hr>
                <a href="https://mailchi.mp/b24dbfe7c665/kimchilettuce">
                    <button class="btn btn-primary btn-xl">Find out more</button>
                </a>
            </section>
        </div>

    </div>
</body>

</html>

下面是我的css文件

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

h1 {
    color: #e2dbdb;
    font-size: 3rem;
}

hr {
    border-color: #F05F44;
    border-width: 3px;
    max-width: 75px;
}

.buffer {
    height: 10rem;
}

.btn {
    font-weight: 700; /*This is different from font size. This specifies how thick the words are*/
    border-radius: 300px;
    text-transform: uppercase;
}

.btn-primary {
    background-color: #F05F44;
    border-color: #F05F44;
}

.btn-primary:hover {
    background-color: #ee4b08;
    border-color: #ee4b08;
    border-width: 4px;
}

.btn-xl {
    padding: 1rem 2rem;
}

When using bootstrap css 4.3.1

When using boostrap css 5.0.2

【问题讨论】：

问题可能出在中的 HTML 代码中。请分享您的完整代码。
它与 5.0.2 bootstrap css 一起使用，请检查：jsfiddle.net/bzkr68x4/1
parent 元素的display 属性设置的值是多少？
@Mohamed 我添加了我的完整代码。请注意在标记有和标记的样式表之间切换时的行为。橙色
标签将消失。
@Shyam 我添加了我的完整代码:)，并在 cmets 中进行了解释。

标签： html css bootstrap-4 cdn

【解决方案1】：

这对我来说很好请分享您网页的身体部分。错误可能在那里。

h1 {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Startup</title>

  <!-- Required meta tags -->
  <!-- Recommended to always add them -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <h1>Sample text</h1>
  <hr />
  <h1>Sample text</h1>
  <hr />
  <h1>Sample text</h1>
  <hr />
</body>

</html>

希望这可以帮助！

【讨论】：