Bootstrap网格没有正确包装？

Question

我正在练习这个网格系统并且网格没有正确包装，它会相互重叠，如下面的屏幕截图所示：

我使用的是版本：3.3.7。

以下code导致此错误：

代码：

  <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>

希望这有帮助！