自舉列奇怪

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來說明。