我使用 bootstrap 和 css 创建了一个时间线，但最后一点我不希望时间线继续，但该线出现了。有人可以告诉我如何摆脱它吗？谢谢
.timeline {
list-style: none;
padding: 0;
position: relative
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: "";
width: 2px;
background-color: #000;
left: 40px;
margin-left: -1.5px
}
.timeline>li {
margin-bottom: 50px;
position: relative;
min-height: 50px
}
.timeline>li:before,
.timeline>li:after {
content: " ";
display: table
}
.timeline>li:after {
clear: both
}
.timeline>li .timeline-panel {
width: 100%;
float: right;
padding: 0 20px 0 100px;
position: relative;
text-align: left
}
.timeline>li .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto
}
.timeline>li .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto
}
.timeline>li .timeline-image {
left: 0;
margin-left: 0;
width: 80px;
height: 80px;
position: absolute;
z-index: 100;
background-color: #343434;
color: #fff;
border-radius: 100%;
border: 7px solid #f1f1f1;
text-align: center
}
.timeline>li .timeline-image h4 {
font-size: 10px;
margin-top: 12px;
line-height: 14px
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
text-align: left;
padding: 0 20px 0 100px
}
.timeline>li.timeline-inverted>.timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto
}
.timeline>li.timeline-inverted>.timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto
}
.timeline>li:last-child {
margin-bottom: 0
}
.timeline .timeline-heading h4 {
margin-top: 0;
}
.timeline .timeline-heading h4.subheading {
text-transform: none
}
.timeline .timeline-body>p,
.timeline .timeline-body>ul {
margin-bottom: 0
}
@media (min-width:768px) {
.timeline:before {
left: 50%
}
.timeline>li {
margin-bottom: 100px;
min-height: 100px
}
.timeline>li .timeline-panel {
width: 41%;
float: left;
padding: 0 20px 20px 30px;
text-align: right
}
.timeline>li .timeline-image {
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px
}
.timeline>li .timeline-image h4 {
font-size: 13px;
margin-top: 16px;
line-height: 18px
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
text-align: left;
padding: 0 30px 20px 20px
}
}
@media (min-width:992px) {
.timeline>li {
min-height: 150px
}
.timeline>li .timeline-panel {
padding: 0 20px 20px
}
.timeline>li .timeline-image {
width: 150px;
height: 150px;
margin-left: -75px
}
.timeline>li .timeline-image h4 {
font-size: 18px;
margin-top: 30px;
line-height: 26px
}
.timeline>li.timeline-inverted>.timeline-panel {
padding: 0 20px 20px
}
}
@media (min-width:1200px) {
.timeline>li {
min-height: 170px
}
.timeline>li .timeline-panel {
padding: 0 20px 20px 100px
}
.timeline>li .timeline-image {
width: 170px;
height: 170px;
margin-left: -85px
}
.timeline>li .timeline-image h4 {
margin-top: 40px
}
.timeline>li.timeline-inverted>.timeline-panel {
padding: 0 100px 20px 20px
}
} <section class="section bg-gray" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading zoomIn animated wow" data-wow-delay=".1s">About</h2>
<h3 class="section-subheading text-muted fadeIn animated wow" data-wow-delay=".2s">Our journey to sucsses with your business.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/3.jpg" alt="">
</div>
<div class="timeline-panel fadeInLeft animated wow" data-wow-delay=".3s">
<div class="timeline-heading">
<h4 class="subheading">Th power of social media</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Imagine the ability for your business to take on a personality of its own, actually talking and engaging with people, even making them laugh. Imagine your business identifying its own opportunities, increasing sales and building relationships with 1000’s of potential customers. Done correctly, that's exactly what Social Media Marketing provides. People buy off people and Social Media is the perfect way to huminise your brand, gain exposure like never before perfect way to huminise your brand, gain exposure like never before and target the right adverts, to the right people, at the right time, in a way they will literally “like”. There are several components needed for your business to go from A to B and maximise its efforts when using Social Media as a marketing vessal… This document will highlight the journey and explain how Ice7Media can offer the shortest route to Social Media Marketing success. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/3.jpg" alt="">
</div>
<div class="timeline-panel fadeInRight animated wow" data-wow-delay=".4s">
<div class="timeline-heading">
<h4 class="subheading">getting ready for take off: The Set-up</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Each Social Media Platform is different… they look different and the operate differently. The “7” in Ice7Media comes from the fact that we concentrate on the top seven Social Media Platforms. That’s seven business profiles that need to be set up correctly, branded correctly and structured to provide a consistent brand image. Ice7Media’s first port of call is to collect, claim, set up and consolidate your businesses Social Media personas. We completely consolidate your businesses Social Media personas. We completely brand each “profile” with custom design work and ensure that everything is correct and pointing in the right digital direction within each platform. Many business have already entered the Social Media arena but it is extremely rare for all seven profiles to be completed in full and working in tandem. Once these foundations have been laid, your business is ready to start broadcasting</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/3.jpg" alt="">
</div>
<div class="timeline-panel fadeInLeft animated wow" data-wow-delay=".5s">
<div class="timeline-heading">
<h4 class="subheading">Cruise Control</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Good, consistent content is critical for social media success… your audience needs to connect with your brand and find your social streams entertaining. It is also crucial to not over sell your product or service, or post too many times and spam your audience. Ice7Media provide daily content for over 70 businesses and have a dedicated team working hard to ensure that your business has always got something good to say. By managing your social streams correctly your adverts and sales messages will be naturally boosted because your audience will already be sales messages will be naturally boosted because your audience will already be engaging with your brand and liking your content. This enables your business to reach far and wide and gain exposure to 1000’s of potential customers. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/3.jpg" alt="">
</div>
<div class="timeline-panel fadeInRight animated wow" data-wow-delay=".6s">
<div class="timeline-heading">
<h4 class="subheading">Firing your guns!</h4>
</div>
<div class="timeline-body">
<p class="text-muted">As soon as you join a social media site they start to build a picture of who you are… Age, sex, location, interests, hobbies, and frequently visited places… everything you do is logged to create an accurate profile of who you are. For a fee, you can access this information and use it to advertise your product or service to your perfect target audience. Ice7Media develop highly engaging adverts and then target them to a selected audience that match the brands “perfect customer profile”. If your product or service is ideal for women, aged 25 - 35, who like dining out, If your product or service is ideal for women, aged 25 - 35, who like dining out, and live within 5 miles of your postcode… Ice7Media can create an advert that will only be seen by people that match this criteria, furthermore, Ice7Media will structure the advert to literally stand out in a very welcome way that the potential client will find difficult to ignore. Social Media Advertising, done correctly, is a very powerful tool that can offer your business a fantastic R.O.I</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/3.jpg" alt="">
</div>
<div class="timeline-panel fadeInLeft animated wow" data-wow-delay=".3s">
<div class="timeline-heading">
<h4 class="subheading">Mission control: Ice7Media</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> Ice7Media operate Social Media Marketing campaigns for over 70 business and have the expertise needed to ensure that your business can simply sit back and relax, and have the expertise needed to ensure that your business can simply sit back and relax, safe in the knowledge that your social media activity is working in tandem with your business's goals.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>提前致谢 汤姆
最佳答案
使用 .timeline>li:last-child 定位时间线中的最后一项。
然后你可以像这样定位部分(试图隐藏部分行):
.timeline>li:last-child .timeline-panel:after {
display: none;
}
关于html - 时间轴，使用 css 和 bootstrap 3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33215603/