html - 使用 bootstrap 的 HR 职位

问题描述

想要将这条大小相同的线完全放在查找更多按钮的顶部。此外，我希望最大的初创公司能够向上移动一点。另外，我用红色圆圈突出显示要重新定位的线。

CSS 和 HTML：

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 {
  font-size: 3rem;
  color: #e2dbdb;
  padding: 1em;
}

hr {
  border-color: #F05F44;
  align-self: center;
  border-width: 5px;
  max-width: 65px;
}

.buffer {
  height: 10rem;
}

.btn {
  font-weight: 700;
  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;
}

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
</body>

标签： htmlcss

html - 使用 bootstrap 的 HR 职位

问题描述

解决方案

推荐阅读