Boostrap 3 개의 상자가 내용을 겹치고 있습니까?

Question

col-md-3을 4 번 사용해야한다고 선언 했음에도 불구하고 내 콘텐츠가 너무 멀리 겹쳐져 있습니다.

여기 내 코드입니다 :

<div class="container"> 

    <div class="row"> 

     <div class="col-md-3"> 

      <p>gjhdgjkhgkjhdgjkhgjkhsdglkjhsgkjhlkjhkjdfghjdkghfdkjghjkghsjkh</p> 

     </div> 

     <div class="col-md-3"> 

      <p>gjhdgjkhgkjhdgjkhgjkhsdglkjhsgkjhlkjhkjdfghjdkghfdkjghjkghsjkh</p> 

     </div> 

     <div class="col-md-3"> 

      <p>gjhdgjkhgkjhdgjkhgjkhsdglkjhsgkjhlkjhkjdfghjdkghfdkjghjkghsjkh</p> 

     </div> 

     <div class="col-md-3"> 

      <p>gjhdgjkhgkjhdgjkhgjkhsdglkjhsgkjhlkjhkjdfghjdkghfdkjghjkghsjkh</p> 

     </div>     


    </div> 

</div> 

그리고 여기에 그림입니다 : 당신이 당신의 "말"에 공백이 없기 때문에

Answer 1

그것입니다.

word-break = "break-all"; 

그래도 난 그것을 권하고 싶지 않다 : 콘텐츠 영역에 공간이 부족 해지면 당신이 단어를 중단하려면 당신은 CSS를 사용할 수 있습니다.

당신은 또한 사용할 수 있습니다

overflow: hidden; 

가 어쨌든, 난 그냥 일반 텍스트를 사용하는 경우 단지 문제가되지 않을 수도 있습니다 생각합니다.

Demo

Answer 2

당신은 CSS를 사용하여 잘 될 것입니다 : 나는이 문제를 감사하고 내가 그 문제를 이해하지만 부트 스트랩은이 작업을 자동으로 처리 할 생각

word-wrap: break-word;