bootstrap的thumbnail的页面文字溢出问题

今天做工程，利用bootstrap进行页面设计的时候，突然发现了这个问题，贴出代码如下：

<div class="row">

  <div class="col-sm-6 col-md-4" id="col1">
    <div class="thumbnail">
      <img  src="../imgs/cat.jpg" alt="...">
      <div class="caption">
        <!--<div class="row">-->
  <div<h3>一只可爱的</h3>
        <p>这里应该是一个具体的介绍</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
    


  </div>
    <div class="col-sm-6 col-md-4" id="col2">
    <div class="thumbnail">
      <img  src="../imgs/cat.jpg" alt="...">
      <div class="caption">
        <!--<div class="row">-->
  <div<h3>一只可爱的</h3>
        <p>这里应该是一个具体的介绍</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
    
    <!---
    第二列
    -->

    
    
    
  </div>
    <div class="col-sm-6 col-md-4" id="col3">
    <div class="thumbnail">
      <img  src="../imgs/cat.jpg" alt="...">
      <div class="caption">
        <!--<div class="row">-->
        <p>特价现货AF男装Abercrombie&Fitch2014新款舒适立领系列ssdfsdfsdfsdfsdfsdfsdfsdfsdfasdfsadfsdf暗室逢灯</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
    
    <!--
        作者：1723262513@qq.com
        时间：2014-11-04
        描述：第二列
        -->
      
    
    
  </div>
   <div class="col-sm-6 col-md-4" id="col1">
    <div class="thumbnail">
      <img  src="../imgs/cat.jpg" alt="...">
      <div class="caption">
        <!--<div class="row">-->
  <div<h3>一只可爱的</h3>
        <p>这里应该是一个具体的介绍</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
    


  </div>
   <div class="col-sm-6 col-md-4" id="col1">
    <div class="thumbnail">
      <img  src="../imgs/cat.jpg" alt="...">
      <div class="caption">
        <!--<div class="row">-->
  <div<h3>一只可爱的</h3>
        <p>这里应该是一个具体的介绍</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
    


  </div>
   <div class="col-sm-6 col-md-4" id="col1">
    <div class="thumbnail">
      <img  src="../imgs/cat.jpg" alt="...">
      <div class="caption">
        <!--<div class="row">-->
  <div<h3>一只可爱的</h3>
        <p>这里应该是一个具体的介绍</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
    

</div>

  </div>

你会发现

结果就这样啦，感觉bootatrap这个问题蛮奇怪的，我用p级块输入的文字，竟然不能自动换行，换行效果很奇怪，然后试了很多中文的案例，并没有发生这样的情况，好吧，先记着，毕竟暂时对我的工程影响不大，只是做一下页面设计的工作，自己注意一下就可以了，那么，进行产品开发的时候怎么办呢？后天传回商品数据到前台，前台总不能这样交差吧，自己这几天解决，在慢慢解决