webentwicklung-frage-antwort-db.com.de

Bootstrap 4 ungültiges Feedback, wenn keine Eingabegruppe angezeigt wird

Ich habe mir Bootstrap 4 - beta angesehen, aber wenn ich .is-invalid mit .input-group verwende, scheint es nicht zu erscheinen.

<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 soll eine ungültige Nachricht angezeigt werden, während .input-group verwendet wird?

Das Hinzufügen des folgenden CSS funktioniert wie eine Problemumgehung, aber es scheint seltsam.

.form-group.is-invalid {
    .invalid-feedback {
        display: block;
    }
}
csstwitter-bootstrapbootstrap-4
6
Ian

Sie haben ihre eigenen Beispiele mit Eingabegruppen-Addons und -Schaltflächen nicht berücksichtigt, selbst mit einem Spaltenmodell. Das Markup erleichtert nur "benachbarte" Elemente, nicht das übergeordnete> benachbarte Element (dafür gibt es keine CSS-Regel).

Anscheinend sollten Sie vorerst auf Alpha 6 zurückgreifen oder Ihre eigenen CSS-Klassen entsprechend programmieren. Das habe ich leider auch gemacht. 

Bitte beachten Sie, wenn Sie meine Antwort lesen, dass dies gerade als die Betaversion veröffentlicht wurde. :)

1
ReSpawN

Bootstrap 4 ist sehr fehlerhaft. 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 gleich aus und wird nicht versagen. 

Für einen besseren Blick versuchen Sie Folgendes:

<div class="text-danger">
<small>Text here</small>
</div>
4
JG Estiot

Damit es genau gleich aussieht, können Sie eine Inline verwenden, wenn Sie beispielsweise in Laravel:

<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
0
Juan Carlos Ibarra

Arbeitsbeispiel 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>
0
manix