Bootstrap 3無序列表顯示不正確

Question

我正在為我的班級在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;
}

Answer 1

您正在設置float: left; 對於ul li ，這會導致“內聯”外觀行為。

在較大的屏幕上使用具有col-lg-4的容器，因此該容器較小，並且某些項目不適合該容器並出現在新行上。

您可以根據需要重置或調整選擇器。

.custom-bullet li
    display: block;
    float: none;
}

Answer 2

問題出在這個班上

.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來添加它。