自举列奇怪

Question

因此，由于某些原因，当我缩小浏览器大小时，我的列非常奇怪地堆叠。我有三个列，每个列中都有无序列表，但是当浏览器缩小时，列高度变得不存在，并且它们彼此重叠。我不知道它是因为我左右浮动元素还是因为我编辑了ul上的webkit填充和边距。

Imgr album of whats happening

这是我

<section class="details-contain greySpace-box"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <ul class="pull-left"> 
        <h1>Timeline:</h1> 
        <li>3 Months</li> 
       </ul> 
      </div> 
      <div class="col-md-4"> 
       <ul class="center-block"> 
        <h1>Role:</h1> 
        <li>Design and Front-end Dev</li> 
       </ul> 
      </div> 
      <div class="col-md-4"> 
       <ul class="pull-right"> 
        <h1>Programs:</h1> 
        <li>Photoshop</li> 
        <li>Illustrator</li> 
        <li>Brackets</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</section> 

.details-contain{ 
    padding: 50px 0; 
} 

.greySpace-box{ 
    height: auto; 
    margin: 0 auto; 
    padding: 80px 0px; 
    background-color: red; 
    box-shadow: 0px 0px 8px #575757; 
    -webkit-box-shadow: 0px 0px 8px #575757; 
    z-index: 5; 
} 

.greySpace-box p{ 
    color: white; 
} 

.greySpace-box li{ 
    color: white; 
} 

.greySpace-box h1{ 
    color: white; 
} 

h1{ 
    font-size: 23px; 
    font-family: "utopia-std"; 
    font-style: italic; 
    font-weight: 600; 
    color: black; 
} 

ul li{ 
    color: #7e7e7e; 
    font-family: "museo-sans"; 
    font-weight: 100; 
    font-size: 15px; 
} 

ul{ 
    height: auto; 
    width: auto; 
    -webkit-padding-start: 0px; 
    -webkit-margin-before: 0px; 
    -webkit-margin-after: 0px; 
    display: block; 
} 

Answer 1

摆脱pull-right和pull-left类和网格将表现正常。

如果你想Programs右对齐，下面的类添加到您的css

.alignRight{ 

text-align: right; 
list-style-position: inside; 

} 

并将其应用到所需的列。然后

您的标记将

<div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <ul> 
        <h1>Timeline:</h1> 
        <li>3 Months</li> 
       </ul> 
      </div> 
      <div class="col-md-4"> 
       <ul class="center-block"> 
        <h1>Role:</h1> 
        <li>Design and Front-end Dev</li> 
       </ul> 
      </div> 
      <div class="col-md-4 alignRight"> 
       <ul> 
        <h1>Programs:</h1> 
        <li>Photoshop</li> 
        <li>Illustrator</li> 
        <li>Brackets</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

Here's a demo来说明。