如何防止 Bootstrap 3 列重叠答案

【问题标题】：How to prevent Bootstrap 3 columns from overlapping如何防止 Bootstrap 3 列重叠
【发布时间】：2016-07-22 13:24:30
【问题描述】：

目前正在学习引导程序，并制作虚拟网站。我在这里有这段代码，我无法正常工作。这些列的标题重叠。添加了占位符文本。据我所知，页面中没有任何样式会影响这一点。

<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

编辑：更新的代码链接

谢谢！

【问题讨论】：

您到底想要发生什么？你的小提琴看起来不错。
当窗口变小内容重叠时，请查看此代码笔 codepen.io/anon/pen/XKEyvd
这是因为字体大小。使用媒体查询调整窗口大小时尝试减小字体大小

标签： html css twitter-bootstrap

【解决方案1】：

问题：列标题太大，字号也太大，列不下，所以和另一个列标题合并了。

解决方案：

使用word-wrap: break-word; 作为标题h2。如果标题不适合一行，这将破坏标题。见小提琴https://jsfiddle.net/24sck8rs/3/
如果单词中有空格，标题似乎正确：https://jsfiddle.net/24sck8rs/4/

【讨论】：

【解决方案2】：

我发现问题是由于定义的网格大小造成的。将它们更改为更高的。

ex：你用过col-sm-3的地方，你会用col-sm-4。

还包括用于更大尺寸设备的类。比如，在你使用 col-sm-4 的地方，你需要添加 col-md-4 和 col-lg-4 才能与手机（sm）、平板电脑（md）、台式电脑（lg）等所有设备一起使用)。

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

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

【讨论】：