文章/答案/技术大牛

发布

社区首页 >问答首页 >如何添加与hr样式相同的垂直线

问如何添加与hr样式相同的垂直线
EN

Stack Overflow用户

提问于 2021-07-17 22:51:48

回答 3查看 47关注 0票数 2

我有我之前做过的代码。我想知道如何添加与hr标签相同的垂直线。如你所见，我想添加2条垂直线来分隔这3个区块。请在整页中打开代码片段。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Page acceuil</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

</head>
<!-- row -->
          <body>

          <div class="row">
            <div class="col-lg-4 col-md-4 col-12 mb-3">
                <!-- text -->
              <h3 class="fw-semi-bold mb-3">Developper vos compétences</h3>
              <p class="fs-4">Avec notre platform on vous fournis des dernieres nouveautés pour assurer vos cours.</p>

            </div>
            
            <div class="col-lg-4 col-md-4 col-12 mb-3">
                <!-- text -->
              <h3 class="fw-semi-bold mb-3">Inspirer vos étudiants par vos cours</h3>
              <p class="fs-4">Aidez les gens à acquérir de nouvelles compétences, à faire progresser leur carrière et à explorer leurs passe-temps en partageant votre
                connaissances.</p>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mb-3">
                <!-- text -->
              <h3 class="fw-semi-bold mb-3">Rejoindre notre communité</h3>
              <p class="fs-4">Profitez de notre communauté active d'instructeurs pour vous aider dans votre processus de création de cours.
              </p>
            </div>
              
          </div>
          </body>
          </html>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-07-17 23:09:22

您可以使用边框属性来完成此任务。只需为第二列指定一个类名并应用该类即可。

.second-column{
    border-left: 2px solid red;
    border-right: 2px solid red;
}

票数 2

Stack Overflow用户

发布于 2021-07-17 23:03:29

在col-lg-4上添加border-right: 2px solid #000。所以CSS应该看起来像这样：

<style>
.col-lg-4 {
    border-right: 2px solid #000;
}
</style>

如果您不喜欢线条的外观，请尝试更改线条的颜色，将#000更改为其他任何十六进制、RGB值或颜色名称，将线条的性质更改为dashed或dotted或任何其他颜色。您还可以将线条的宽度2px更改为任何单位的任何值。

票数 1

Stack Overflow用户

发布于 2021-07-17 23:19:35

我最有可能解决这个问题的方法是使用CSS在div之间添加一行，这是通过给前两个div添加一个例如的类。"vSeparator“。

然后在CSS文件中执行类似这样的操作，或者使用style标签将其添加到顶部。

div.vSeparator {
    border-right: 1px solid black  
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68421602

复制

相似问题

问如何添加与hr样式相同的垂直线
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加与hr样式相同的垂直线EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加与hr样式相同的垂直线
EN