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

EDIT：更新されたコードリンク

ありがとう！

Answer 1

問題：列のタイトルが大きすぎます。また、フォントサイズが大きすぎて列に収まらないため、別の列タイトルと結合されています。

ソリューション：タイトルh2ため

1. 使用word-wrap: break-word;。 1行に収まらない場合はタイトルを壊します。フィドルhttps://jsfiddle.net/24sck8rs/3/
2. を参照してくださいあなたは言葉でスペースを持っている場合は、タイトル正しいようだ：https://jsfiddle.net/24sck8rs/4/

Answer 2

私は問題が定義されたグリッド・サイズによるものであることを参照してください。 これを上位のものに変更します。

例：col-sm-3を使用した場所では、col-sm-4を使用します。

であり、より大きなサイズのデバイス用のクラスも含む。 col-sm-4を使用する場所のように、携帯電話（sm）、タブレット（md）、デスクトップPC（lg）などのすべてのデバイスで動作するようにcol-md-4とcol-lg-4を追加する必要があります。 ）。

実際に設定したのとまったく同じ方法でグリッドサイズを設定する必要がある場合は、以前の回答と同じように他の方法もあります。

これはあなたを助けました...ありがとう！