Сетка начальной загрузки не упаковывается должным образом?

Question

Я практикую эту систему сетки, и сетка не оборачивается должным образом, она перекрывает текст друг друга, как видно на скриншоте ниже:

Я использую версию: 3.3.7.

Вот код , который приводит к этой ошибке:

Код:

  <div class="container">
    <div class="row">
        <div class="col-md-8">           
            <p>ROW 1</p>
        </div>  
        <div class="col-md-4">            
            <p>ROW 1.1</p>
        </div>  

Ошибка:

 <div class="container">
    <div class="row">
        <div class="col-md-8">          
            <p>ROW 1</p>
        </div>  
        <div class="col-md-4">            
            <p>ROW 1.1</p>
        </div>  
    </div>
      <br>
    <div class="row">
        <div class="col-md-3">          
            <p>ROW 2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
        </div>  
        <div class="col-md-3">            
            <p>ROW 2.1 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
        </div>  
        <div class="col-md-3">          
            <p>ROW 2.2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
        </div>  
        <div class="col-md-3">            
            <p>ROW 2.3 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
        </div>  
    </div>  
  </div>

Любойбыло бы здорово помочь понять, почему текст не будет перенесен.

Answer 1

Я считаю, что это происходит потому, что содержимое внутри контейнеров - это одно слово, которое слишком длинно для столбца.Если вам просто нужно иметь такой длинный слово в каждом контейнере, вы можете попробовать применить перенос слов к тегам абзаца следующим образом:

<style>
    p {
        word-wrap:break-word;
    }
</style>

Надеюсь, это поможет!