Bootstrap: Rimuovi il bordo del campo modulo

Question

Sono nuovo al CSS e sto utilizzando Bootstrap e voglio utilizzare i moduli in 2 modi: Con o senza bordi attorno ai campi del modulo. Come posso ottenere il meglio? Ecco un esempio di un modulo Bootstrap che voglio rimuovere i bordi per: plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.

Per curiosità, la ragione per cui desidero questo è che voglio prima mostrare all'utente i dati che ha e quindi attivare o disattivare i bordi in base a se il modulo è in modalità "modifica" o meno. L'utente può accedere alla modalità "modifica" facendo clic su un collegamento "Modifica" o semplicemente iniziare a modificare un campo.

Answer 1

In questo esempio, per rimuovere il bordo è sufficiente scrivere:

.form-control { 
    border: 0; 
} 

Nel file CSS.

Ciò rimuovere i bordi da tutti i vostri campi di modulo, però, un approccio più flessibile potrebbe essere quella di collegare una classe per i campi del modulo che si desidera avere nessun bordo, in modo che il codice HTML sarebbe qualcosa di simile:

<input type="email" class="form-control no-border" id="inputEmail3" placeholder="Email"> 

e il vostro CSS:

.no-border { 
    border: 0; 
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */ 
}