SandyZhao19 2022-05-09 08:52 采纳率: 0%
浏览 35

Bootstrap如何更改col边框的样式

Bootstrap我想要的效果是

img

请问大家如何使右侧border上下都留出一定距离，并且在中间加上一个箭头icon

问题相关代码
HTML

<div class="container">
  <div class="row problem-solution">
    <div class="col-12 col-lg-4 no-gutters px-0">
      <img src="./assets/img/women-empowerment-img.png" class="img-fluid mx-auto w-100">
    </div>
    <div class="col-12 col-lg-4 pt-5 px-5 text-white border-right">
      <h3>Women's Empowerment</h3>
      <p class="pt-4"><b>The Problem</b></p>
      <p>INA aims for woman and girls to be economically independent, participating in decision making, holding positions of leadership and living free from violence.</p>
    </div>
    <div class="col-12 col-lg-4 pt-5 px-5 text-white">
      <h2><br/></h2>
      <p class="pt-4"><b>The Solution</b></p>
      <p>Women could increase their income globally by up to 76% if the employment participation and wage gaps between women and men were closed.</p>
    </div>
  </div>
</div>

CSS

.problem-solution {
    background-color: #4E878F;
}

.border-right {
    border-right: 1px solid white;
    margin: 20px 0 20px 0; 
}
现在只能做出下图的效果

img

  • 写回答

1条回答 默认 最新

  • 渣渣与学霸 2022-05-09 09:47
    关注
    
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-with-hr {
            position: relative;
            z-index: 2;
        }
        .text-with-hr:before {
            position: absolute;
            content: '';
            left: 20px;
            height: 250px;
            border-left: 1px solid #d4d4d4;
            z-index: -1;
        }
        .text-with-hr span {
            display: inline-block;
            background: white;
            position: absolute;
            padding: 10px;
            top: 100px;
            left: 2px;
        }
    </style>
</head>
 
<body>
    <div class="text-with-hr">
        <span>-></span>
    </div>
</body>
    评论

报告相同问题？

问题事件

  • 修改了问题 5月9日
  • 修改了问题 5月9日
  • 创建了问题 5月9日

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料