form-inline和form-group引導窗體間距問題？

Question

所以我想創造的人進入他們的姓名和地址的基本佈局，以及它目前看起來像：

所以，我基本上堆疊是這樣的：

<div className='form-inline'></div> 
<div className='form-group'></div> 
<div className='form-inline'></div> 

但是爲什麼'form-group'和'form-inline'之間有空格？有什麼我可以做的拿出來嗎？

要做到這一點，我用這個結構：

  <form action="" className="form-inline"> 
        <div className="form-group"> 
         <input 
          className="form-control" 
          placeholder="First Name" 
          }} 
         /> 
        </div> 
        <div action="" className="form-group"> 
         <input 
          className="form-control" 
          placeholder="Last Name" 
         /> 
        </div> 
       </form> 
       <form action="" className="form-group"> 
        <input 
         className="form-control" 
         placeholder='Street' 
        /> 
       </form> 
       <form action="" className="form-inline"> 
        <div className="form-group"> 
         <input 
          className="form-control" 
          placeholder='City' 
         /> 
        </div> 
        <div className="form-group"> 
         <input 
          className="form-control" 
          name='state' 
          placeholder='State' 
          maxLength='2' 
          size='2' 
          type='text' 
         /> 
        </div> 
        <div className="form-group"> 
         <input 
          className="form-control" 
          name='zip' 
          type='text' 
          placeholder='zip' 
          maxLength='5' 
          size='5' 
         /> 
        </div> 
       </form> 

任何幫助是極大的讚賞，因爲我是新來引導，謝謝！

Answer 1

.form-group已定義margin-bottom: 15px;，但如果在.form-inline內定義了.form-group元素，則它沒有應用餘裕。

示範：

<div class="form-group"></div> <!-- margin-bottom: 15px --> 

<div class="form-inline"> 
    <div class="form-group"></div> <!-- margin-bottom: 0 --> 
</div> 

所以使用.form-group內.form-inline

<div class="form-inline"> 
    <div class="form-group"></div> 
</div> 

希望這有助於！