Wie Sie Bootstrap bg-x (z. B. bg-danger) -Klassen zur Eingabe von Textfeldern hinzufügen?

Question

Die Hintergrundfarbe, die der Bootstrap-Klasse bg-danger zugeordnet ist, wird nicht auf ein Eingabetextfeld der Klasse angewendet. Wie kann das gemacht werden?

<div class="form"> 
    <div class="form-group has-error"> 
     <input type="text" class="form-control bg-danger"> 
    </div> 
</div> 

Answer 1

Die Stildefinitionen für die form-control Klasse unter den Formatdefinitionen kommen für die bg-danger Klasse in bootstrap.css (oder bootstrap.min.css). Aus diesem Grund überschreiben Formularsteuerungsstile die Hintergrundfarbe mit Weiß.

Sie müssten Ihre eigenen benutzerdefinierten Klassen/Stile erstellen, um die Formularsteuerung mit einer anderen Hintergrundfarbe zu überschreiben.

Answer 2

Formularsteuerung und Bg-Gefahr werden nicht zusammen funktionieren. Erwähnen Sie eine andere Klasse im Eingabefeld und legen Sie ihre Stylingeigenschaften fest. Sie können es für ein Eingabefeld oder für alle Felder verwenden.

.background-input{ 
 
    background-color:#ff1a1a; 
 
}

<div class="form"> 
 
     <div class="form-group has-error"> 
 
      <input type="text" class="form-control background-input"> 
 
     </div> 
 
    </div>

Answer 3

Nun, wie die anderen Antworten gesagt, kommt form-control nach bg-danger, und so seine background-color den Hintergrund von bg-danger außer Kraft setzen.

Aber ich konnte beide Klassen verwenden, ohne eine zusätzliche Klasse zu benötigen. Angenommen, ich den folgenden HTML-Code haben:

<input type="text" class="form-control bg-danger" /> 

Also habe ich nur brauchte ich in meinem CSS fügen Sie den folgenden Code

.form-control.bg-danger { 
    background-color: #f2dede; 
} 

Also, wenn ein Element hat beide die Klassen form-control und bg-danger, er wird dies background-color (das gleiche von bg-danger, aber wenn Sie möchten, können Sie eine andere Farbe wählen). Natürlich kann ich das gleiche mit allen anderen Bootstrap-Klassen machen.