HTML -Card text not wrapping

Question

我在此tutorial之后创建了一个html卡。然后我添加到我的页面（使用引导3.0）。但是，文本不像本教程中那样包装。有谁知道为什么这是或如何解决这个问题？

图片

https://i.stack.imgur.com/cD9dy.png

HTML片段

 <div class="row"> 
      <div class="col-lg-2"> 
       <div class="form-group "> 
        <card [visable]="obj.one" [width]="100" [image]="obj.two" [header]="project.manager?.name" [content]="obj.four"></card> 
       </div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="form-group"> 
        <label class="control-label "> 
         Project Name 
        </label> 
        <div class="input-group"> 
         <input class="form-control" type="text" [value]="project.name" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label "> 
         Project Number 
        </label> 
        <div class="input-group"> 
         <input class="form-control" type="text" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label "> 
         Project Creator 
        </label> 
       </div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="form-group"> 
        <label class="control-label "> 
         Team 
        </label> 
        <div class="input-group"> 
         <input class="form-control" type="text" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label "> 
         Team ID 
        </label> 
        <div class="input-group"> 
         <input class="form-control" type="text" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label "> 
         Team Manager 
        </label> 
       </div> 
      </div> 
      <div class="col-lg-3"> 
       <div> 
        <div class="card" style="width: 100%;"> 
         <div class="container"> 
          <h4><b>Project Details</b></h4> 
          <p >One team of students collected data from a         consumer Internet website with automobile specificatins.The summary slide shows     the results of their linear regression analysis on car engine horsepower and average miles per gallon (MPG) ratings</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

CSS

.card { 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    transition: 0.3s; 
} 

.card:hover { 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
} 

.container { 
    padding: 2px 16px; 
} 

Answer 1

引导container与相互冲突 “教程” container。

使用一个特殊的容器类卡...

<div class="col-lg-3"> 
     <div> 
      <div class="card" style="width: 100%;"> 
        <div class="card-container"> 
         .. 
        </div> 
      </div> 
     </div> 
</div> 

.card-container { 
    padding: 2px 16px; 
}