ブートストラップ4入力グループが表示されない無効なフィードバック

Question

.is-invalidと.input-groupを使用すると、表示されないようですが、私はブートストラップ4ベータを検討しています。

<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>

はどのように.input-groupを使用しているときに、無効なメッセージを表示することを意図していますか？

次のCSSを追加すると回避策として機能しますが、奇妙に見えます。

Answer 1

列モデルであっても、入力グループのアドオンとボタンを使用して独自の例を考慮していません。マークアップは、親要素>隣接要素ではなく、「近傍」要素のみを容易にします（CSSルールはありません）。

今のところ、Alpha 6に戻って、独自のCSSクラスをプログラムする必要があります。残念ながら、私は同じことをやった。

私の答えを読んだとき、これはベータ版がリリースされたのと同じように投稿されたことに注意してください。 :)

Answer 2

約this issueのチケットがあります。

Answer 3

Boostrap 4は非常にバグです。

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

をして：私の提案は交換することです

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

2つ目は、実質的には同じに見えますし、失敗しません。

よりよい一見のために、試してみてください。

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

Answer 4

flex-wrapと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>