[英]Bootstrap 3 Unordered list displaying incorrectly
我正在为我的班级在Bootstrap 3中创建无序列表。 我使用glyphicon作为要点。 我在桌面视图中包装最后一个项目时遇到了麻烦,并且在不同的断点处查看它们时,这些项目有时会内联显示。
这是我的html
<div class="bg">
<div class="container-fluid text-center" style="height:100%;">
<div class="row content">
<div class="col-sm-2">
</div>
<div class="col-lg-8 text-left">
<h2>EDUCATION</h2>
<hr class="style1">
<h3 class="job">Bachelor of Science, Marketing - San Jose State University</h3>
<h2>CERTIFICATIONS</h2>
<hr class="style1">
<h3 class="job">HubSpot Inbound Certification</h3>
<h4>2016</h4>
<p>The course details the stages of the inbound methodology. Lectures explained various inbound marketing topcis such as how to optimize websites and best practices for a sucessful landing page.</p>
<h3 class="job">Coursera Web Design for Everybody</h3>
<h4>2017</h4>
<ul class="custom-bullet col-lg-4">
<li>Introduction to HTML5</li>
<li>Introduction to CSS3</li>
<li>Interactivity with JavaScript</li>
<li>Advanced Styling with Responsive Design</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
这是我的CSS:
.bg {
background-color:#ffffff;
background-size:100%;
width:100%;
height: auto;
padding-top:8%;
margin-bottom:0;
margin-top:3%;
}
.job {
color: #800080;
}
.custom-bullet li {
display: block;
}
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left;
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
您正在设置float: left;
对于ul li
,这会导致“内联”外观行为。
在较大的屏幕上使用具有col-lg-4
的容器,因此该容器较小,并且某些项目不适合该容器并出现在新行上。
您可以根据需要重置或调整选择器。
.custom-bullet li
display: block;
float: none;
}
问题出在这个班上
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left; // change to none
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
顺便说一句,为什么要使用CSS伪元素而不是用html来添加它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.