在bootstrap 4中如何使用html和css添加水平线

qlfbtfca 于 2022-12-20 发布在 Bootstrap

关注(0)|答案(2)|浏览(269)

我想添加一条像page那样的小水平线。我尝试使用<hr\>标记，但没有得到想要的线，还有其他方法添加这条线吗？下面的代码描述了我到目前为止为构造这条线所做的工作，但我还没有完成。请有人帮助我创建这条线谢谢

.second-bg-cover{
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.5)) ,url(../img/state1.jpg);
    width: 100%;
    height: 320px;
    background-repeat: no-repeat;
    position: relative;
    z-index: -1;
  }

  .second-cover-heading {
    position: absolute;
    z-index: 1;
    padding: 60px 0;
    color: var(--white);
  }

  .second-cover-photo-section h1{
    font-family: 'Raleway',sans-serif;
    font-weight: 400;
  }
  .second-cover-download{
    background: transparent;
    color: white;
    padding: 8px 18px;
    border-color: var(--white);
    position: relative;
    z-index: 2;

  }
  .second-cover-download{
    margin-left:580px;
    margin-top: 25px;
  }

<div class="row">
  <div class="col-md-12">
    <div class="second-bg-cover"></div>
  </div>
  <div class="col-md-12 second-cover-heading">
    <h1 class="text-center">STYLISH AXURE DESIGN</h1>
    <hr style="width:80px;height:2px;text-align:left;margin-left:660px;border: 1.5px solid white; color: white;">
    <p class="text-center mt-4">Use the selections you need, remove the lines you don't need.Create gorgeous prototypes faster than ever!
    </p>
    <div class="second-cover-download">
      <button class="second-cover-download ms-5" type="button">Download</button>
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/74824001/how-do-i-add-an-horizontal-line-using-html-and-css-in-bootstrap-4

2条答案

按热度按时间

n7taea2i1#

可以像这样使用::after：

- 超文本标记语言：**

<h1 class="text-center with_underline">STYLISH AXURE DESIGN</h1>

- 中央支助组：**

.with_underline::after{
  content: "";
  height: 3px;
  width: 120px;
  background: red;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

小提琴在这里：https://jsfiddle.net/43e6r07m/

赞(0）回复(0）举报 2022-12-20

jm81lzqq2#

您可以使用hr标记创建一条线，或者创建一个名为"spacer"的类来定制这条线。例如：

.spacer{
            width:100%;
            border:2px solid rgba(0,0,0,0.2);
            margin:0;
            box-sizing: border-box;
  }
  .myContainer{
            width:80%;
            margin-left:auto;
            margin-right:auto;
  }

<div class="myContainer">
        Lorem ipsum dolor sit amet...
        <div class="spacer"></div>
  </div>

赞(0）回复(0）举报 2022-12-20

我来回答

在bootstrap 4中如何使用html和css添加水平线

2条答案

相关问题

热门标签

最新问答