Question

目前正在学习bootstrap，并组建虚拟网站。我在这里有这个代码，我无法正常工作。这些列的标题重叠。已添加占位符文本。根据我的知识，页面中没有任何样式会影响这一点。

<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

问题：列的标题太大，字体大小也适合列，因此它与另一列标题结合。

解决方案：

使用word-wrap: break-word;作为标题h2。如果它不适合一行，这将打破标题。看小提琴https://jsfiddle.net/24sck8rs/3/
如果您在单词中有空格，则似乎标题正确：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））。

如果你真的需要设置与你设置的方式完全相同的网格大小，还有其他方法与上一个答案相似。

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

如何防止Bootstrap 3列重叠

2 个答案: