Aggiungere spazio tra input e pulsante nella bootstrap

Sto usando bootstrap 3 e avere questo HTML:Aggiungere spazio tra input e pulsante nella bootstrap

<body> 
    <div class="container body-content"> 
     <div class="row"> 
      <div class="col-lg-6"> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div> 
       <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button> 
      </div> 
     </div> 
    </div> 
</body>

fiddle

voglio il pulsante finale da distanziata verticalmente dal input-group div e non toccare esso.

Un esempio ho trovato utilizzando un modulo ha il tasto distanziati: fiddle

e questo è il modo in Vorrei che il mio tasto. Come posso averlo?

fonte

2014-09-23 Sam Holder

Semplicemente avvolgere ogni coppia di <label> e <div class="input-group"> da un <div> con classe .form-group. (O semplicemente avvolgere l'ultima coppia, se necessario, in modo da)

La ragione è che Twitter bootstrap applica un margin-bottom di 15px a .form-group. Si potrebbe anche farlo manualmente dando il margine superiore a <button> o dando l'ultimo input un margine inferiore.

EXAMPLE HERE

<div class="container body-content"> 
    <div class="row"> 
     <div class="col-lg-6"> 

      <div class="form-group"> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div>      
      </div> 

      <div class="form-group"> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div>      
      </div> 

      <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button> 

     </div> 
    </div> 
</div>

fonte

2014-09-23 22:46:34

Grazie! Accetterò quando mi alzerò la mattina, come bisogno di aspettare al momento. –

Aggiungere spazio tra input e pulsante nella bootstrap

risposta

Problemi correlati