html - 如何防止 Bootstrap 3 列重叠

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>

这是问题的一个 fiddle :http://codepen.io/anon/pen/XKEyvd

编辑:更新代码链接

谢谢!

Answer 1

问题:列标题太大，字体也太大，不适合列，所以它与另一个列标题合并。

解决方案:

1. 使用 word-wrap: break-word; 作为标题 h2。如果它不适合一行，这将破坏标题。见 fiddle https://jsfiddle.net/24sck8rs/3/
2. 如果您的文字中有空格，标题似乎是正确的:https://jsfiddle.net/24sck8rs/4/