我试图在这个面包屑式时间轴的每个组件下面显示一些项目符号。我已经得到了如何在时间轴下将子弹放在全屏幕下的答案,但我不知道如何在屏幕被挤压或屏幕尺寸较小时显示点数。如何在时间轴的每个部分下方显示积分,并做出回应?如果有人可以提供帮助,我们将不胜感激。
这是我的代码段:
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
/* bullet points under timeline */
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
/*-----------------------*/
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
@media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
@media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}

<div id="crumbs">
<ul class="list-unstyled">
<li class="">
<a href="#1"><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</a>
<ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li></li>
<li class="">
<a href="#2"><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)</a>
<ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li class=""><a href="#3"><b>STEP 3:</b><br>Mock<br>OSCEs</a>
</li>
<li class=""><a href="#4"><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</a>
</li>
</ul>
</div>
&#13;
以下是我希望它的样子:
答案 0 :(得分:0)
我尝试使用col-xs-3。对于较大的屏幕,您需要对其进行一些尝试。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
/* bullet points under timeline */
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
/*-----------------------*/
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
@media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
ul.points {
float: left;
margin-top: 200px;
margin-left: -200px;
}
ul.points li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
@media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
</style>
<br>
<div id="crumbs">
<ul class="list-unstyled">
<li class="col-xs-3" style="padding:0px;margin:0;">
<a href="#1"><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</a>
<!-- <ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul> -->
</li>
<li></li>
<li class="col-xs-3" style="padding:0px;margin:0;">
<a href="#2"><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)</a>
<!-- <ul class="points">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul> -->
</li>
<li class="col-xs-3" style="padding:0px;margin:0;"><a href="#3"><b>STEP 3:</b><br>Mock<br>OSCEs</a>
</li>
<li class="col-xs-3" style="padding:0px;margin:0;"><a href="#4"><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</a>
</li>
</ul>
</div>