form-actions class design simile in twitter bootstrap 3

Question

Abbiamo eseguito l'aggiornamento a twitter bootstrap 3 (dalla 2.3.2) e utilizzato forme .form-horizontal con i pulsanti all'interno della classe .form-actions in vari punti. Abbiamo cercato per il design simile o alternative nella nuova versione senza alcun risultato.

Se non c'è alcuna opzione che cosa è il nuovo modo consigliato di mettere due o più pulsanti (nella stessa riga) alla fine di una forma orizzontale?

Answer 1

Il .form-action viene rimosso in bootstrap 3. e si può usare un form-group per aggiungere i pulsanti alla fine del modulo.

È possibile aggiungere più pulsanti per formare gruppi nella stessa linea:

<div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <input type="submit" class="btn btn-default btn-lg" value="Save" > 
      <input type="submit" class="btn btn-default btn-lg" value="Update" > 
     </div> 
    </div> 

Se si vuole avere qualche effetto colore o colore di sfondo per i pulsanti, è necessario considerare che la forma-gruppo ha un margine sinistro e destro di -15px.

<div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group"> 

Vedere Bootstrap 3 form and form last row background color

Answer 2

È anche possibile utilizzare la classe form-horizontal in bs3. Tuttavia, un cambiamento importante è che devi definire la larghezza dell'etichetta sull'etichetta e invece di usare form-actions puoi combinare più pulsanti all'interno della classe col-x-x che viene utilizzata come controls in bs2. Si prega di consultare this.

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox"> Remember me 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-primary">Sign in</button> <button type="submit" class="btn btn-default">Cancel</button> 
    </div> 
    </div> 
</form>