如何防止Bootstrap 3列重疊

Question

當前學習引導程序，並組成虛擬網站。我在這裏有這個代碼，我無法正確工作。這些列的標題重疊。佔位符文本已添加。在我看來，頁面中沒有任何樣式會影響到這一點。

<div class="container-fluid whatwecando" style="background-color: #3ED500;min-height: 600px"> 
      <div class="row"> 
       <div class="col-sm-12 text-center"> 
        <br><br> 
        <h1 style="text-decoration: underline; font-family: Poiret+One; font-size: 3em; color: #F1F2F2"><b>WHAT WE CAN DO</b> FOR YOU</h1> 
        <br></div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-2 cando text-center"></div> 
       <div class="col-sm-2 cando text-center"> 
        <img class="img-circle" src="" alt="Generic placeholder image"> 
        <h2 style="font-family: Nunito; color: #F1F2F2">THEFIRSTTITLE</h2> 
        <p class="text-center" style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
       </div><!-- /.col-lg-4 --> 
       <div class="col-sm-2 cando text-center"> 
        <img class="img-circle" src="" alt="Generic placeholder image"> 
        <h2 style="font-family: Nunito; color: #F1F2F2">THESECONDTITLE</h2> 
        <p class="text-center"style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
       </div><!-- /.col-lg-4 --> 
       <div class="col-sm-2 cando text-center"> 
        <img class="img-circle" src="" alt="Generic placeholder image"> 
        <h2 style="font-family: Nunito; color: #F1F2F2">THETHIRDTITLE</h2> 
        <p class="text-center"style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
       </div><!-- /.col-lg-4 --> 
       <div class="col-sm-2 cando text-center"> 
        <img class="img-circle" src="" alt="Generic placeholder image"> 
        <h2 style="font-family: Nunito; color: #F1F2F2">MANYTITLESSS</h2> 
        <p class="text-center" style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>  
       </div> 
       <div class="col-sm-2 cando text-center"></div> 
      </div><!-- /.row --> 
     </div> 

這裏的問題的小提琴：http://codepen.io/anon/pen/XKEyvd

編輯：更新後的代碼鏈接

謝謝！

Answer 1

問題：該列的標題太大，並且字體大小也很大以適合該列，因此它與另一個列標題結合在一起。

解決方案：

1. 使用word-wrap: break-word;爲標題h2。如果它不適合一行，這將打破標題。看看你是否有空間的話撥弄https://jsfiddle.net/24sck8rs/3/
2. 似乎標題正確：https://jsfiddle.net/24sck8rs/4/

Answer 2

我看到的問題是，由於定義的網格大小。 將它們更改爲更高的。例如：你使用col-sm-3的地方，你可以使用col-sm-4。

並且還包括用於較大尺寸的設備的類。例如，您使用col-sm-4的地方，您需要添加col-md-4和col-lg-4以處理各種設備，如手機（sm），平板電腦（md），臺式電腦（lg ）。

如果您確實需要按照您設置的方式設置網格大小，還有其他方法與上一個答案類似。

希望這對你有幫助......謝謝！