Bootstrap Formular Abstand Probleme mit Formular-Inline und Formular-Gruppe?

Question

So ihren Namen und Adresse Ich versuche, eine grundlegende Layout für jemand erstellen eingeben, und es sieht derzeit so etwas wie:

Also, bin ich im Grunde wie das Stapeln:

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

Aber warum gibt es einen Abstand zwischen dem 'form-group' und dem 'form-inline'? Gibt es etwas, was ich tun kann, um es herauszunehmen?

Um dies zu tun, habe ich diese Struktur:

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

Jede Hilfe sehr, wie ich bin neu geschätzt wird Bootstrap, Dank !!

Answer 1

.form-group hat margin-bottom: 15px; definiert, aber wenn das .form-group Element innerhalb der .form-inline definiert ist, hat es keine Marge angewendet.

Demonstration:

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

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

So .form-group verwenden innen .form-inline

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

hoffe, das hilft!