2017-09-20 119 views
0

這是我的HTML代碼
我不明白爲什麼內容不顯示在div內。內部不顯示div

 <div class="contact-form"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       <form class="form-horizontal"> 
        <div class="form-group"> 
         <label class="control-label">Full Name :</label> 
         <div class=""> 
          <input type="text" class="form-control" /> 
         </div> 
        </div>    
        <div class="form-group"> 
         <label class="control-label">Subject :</label> 
         <div class=""> 
          <textarea class="form-control"></textarea> 
         </div> 
        </div>         
        <div class="form-group"> 
         <button class="btn btn-success">Submit</button> 
        </div>                        
       </form> 
      </div> 
     </div> 

我的繼承人風格

.contact .contact-form{ 
    width: 500px; 
    margin: 0 auto; 
    border: 1px solid #ccc; 
    border-radius: 5px;  
} 

有人能幫助我嗎?提前致謝。

+1

你的問題沒有足夠的細節,這表明,要達到什麼目的。 – kravisingh

+0

我所問的是,子元素沒有顯示在父div中,而是顯示在父div之外。 –

回答

0

試試這個:

CSS

.contact-form{ 
    width: 500px; 
    margin: 0 auto; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    overflow: hidden; 
} 

DEMO HERE

+0

感謝路易斯那:) –

0

因爲你還沒有使用排DIV,您使用的引導結構,所以你應該使用的cols(同事lg-12 col-md-12 col-sm-12 col-xs-12)。

試試這個:

<div class="row contact-form"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <form class="form-horizontal"> 
       <div class="form-group"> 
        <label class="control-label">Full Name :</label> 
        <div class=""> 
         <input type="text" class="form-control" /> 
        </div> 
       </div>    
       <div class="form-group"> 
        <label class="control-label">Subject :</label> 
        <div class=""> 
         <textarea class="form-control"></textarea> 
        </div> 
       </div>         
       <div class="form-group"> 
        <button class="btn btn-success">Submit</button> 
       </div>                        
      </form> 
     </div> 
    </div>