Bootstrap 4 ungültige Rückmeldung mit Eingang Gruppe nicht anzeigen

Bin ich auf der Suche in die Bootstrap-4 - beta, die allerdings, wenn Sie .is-invalid mit .input-group es scheint nicht zu zeigen, bis.

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="label">Label</label>
  <div class="input-group">

    <div class="input-group-addon">
      label
    </div>
    <input type="text" value="" name="label" class="form-control is-invalid">
  </div>

  <div class="invalid-feedback is-invalid">
    <strong>Invalid Label</strong>
  </div>
</div>

Wie werden Sie gedacht, um ein invalid message, während der Verwendung .input-group?

Hinzufügen der folgenden CSS funktioniert als workaround, aber es scheint seltsam.

.form-group.is-invalid {
    .invalid-feedback {
        display: block;
    }
}
InformationsquelleAutor Ian | 2017-08-14
  1. 1

    Haben Sie nicht berücksichtigt, Ihre eigenen Beispiele mit Eingang Gruppe addons und Tasten, sogar mit einer Säulen-Modell. Das markup nicht nur die "benachbarten" Elemente, nicht Eltern - > benachbarten element (es gibt keine CSS-Regel für das).

    Scheint es, denn jetzt, sollten Sie zurückgreifen, um Alpha 6 oder Programmieren Sie Ihre eigenen CSS-Klassen entsprechend anpassen. Ich habe das gleiche getan, leider.

    Bitte beachten Sie beim Lesen meiner Antwort, dass dies gepostet wurde nur als beta veröffentlicht wurde. 🙂

    InformationsquelleAutor ReSpawN
  2. 6

    Boostrap 4 ist sehr buggy. Mein Vorschlag ist, zu ersetzen:

     <div class="invalid-feedback">
 Text here
 </div>

    Mit:

    <div class="text-danger">
Text here
</div>

    Und der zweite sieht praktisch die gleiche und wird nicht scheitern.

    Für ein besseres Aussehen, versuchen Sie:

    <div class="text-danger">
<small>Text here</small>
</div>
    InformationsquelleAutor JG Estiot
  3. 1

    Beispiel arbeiten mit einem trick, mit flex-wrap und w-100:

    <div class="form-group">
    <label class="form-control-label">Name</label>
    <div class="input-group flex-wrap">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback w-100">Custom error</div>
    </div>
</div>
    InformationsquelleAutor manix
  4. 0

    Machen, es sieht genau das gleiche können Sie mit einer inline-if, in Laravel zum Beispiel:

    <input name="label" class="{{$errors->has('label') ? 'is-invalid' : '' }}">
                   @if ($errors->has('label'))
                       <div class="text-danger" role="alert">
                          <small>{{ $errors->first('code') }}</small>
                        </div>
                   @endif
    InformationsquelleAutor Juan Carlos Ibarra
Schreibe einen Kommentar