这是时间线图表,我必须在每个li元素之前绘制一个圆圈。
ul.timeline>li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
<a href="#" class="float-right">21 March, 2014</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
<a href="#">21 000 Job Seekers</a>
<a href="#" class="float-right">4 March, 2014</a>
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
如何更改HTML元素上边框的颜色?
下面是完整的示例:https://bootsnipp.com/snippets/featured/simple-vertical-timeline
答案 0 :(得分:0)
我想您想在两个蓝色圆圈之间添加边框,还希望删除默认的ul
样式。
我在您的代码中添加了一些css
代码。在下面查看。
ul
样式,我添加了list-style-type
作为
none
。:before
添加到ul.timeline
。
ul.timeline {
list-style-type: none;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline>li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
<a href="#" class="float-right">21 March, 2014</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
<a href="#">21 000 Job Seekers</a>
<a href="#" class="float-right">4 March, 2014</a>
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
答案 1 :(得分:0)
您可以仅使用Bootstrap类(无需额外的CSS)来创建时间轴。 border
实用程序类用于创建行。
<!-- timeline item -->
<div class="row">
<!-- timeline item 1 left dot -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
<h5 class="m-0">
<span class="badge badge-pill bg-light border"> </span>
</h5>
<div class="row h-50">
<div class="col border-right"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline item 1 event content -->
<div class="col py-2">
<div class="card">
<div class="card-body">
Timeline item content....
</div>
</div>
</div>
</div>
答案 2 :(得分:-1)
您可以将边框颜色更改为任何所需的颜色 请检查此屏幕截图,我们将在实际示例中对其进行更改