如何防止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 ）。

如果您确实需要按照您设置的方式设置网格大小，还有其他方法与上一个答案类似。

希望这对你有帮助......谢谢！