Bootstrap 4无效反馈输入组不显示

我一直在寻找Bootstrap 4 - beta，但是当使用.is-invalid与.input-group它似乎并没有显示出来。Bootstrap 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作为解决方法工作，但看起来很奇怪。

.form-group.is-invalid { 
    .invalid-feedback { 
     display: block; 
    } 
}

来源

2017-08-14 Ian

他们没有考虑到他们自己的例子，使用输入组插件和按钮，即使是列模型。标记只会促进“邻居”元素，而不是父元素>邻居元素（没有CSS规则）。

现在看来，你应该回退到Alpha 6或者相应地编写你自己的CSS类。不幸的是，我也做了同样的事情。

请在阅读我的答案时注意，这是在测试版发布时发布的。 :)

来源

2017-08-24 08:16:13 ReSpawN

有道理，似乎在表单验证侧面相当大的思念。希望下一个测试版将解决这个问题。 – Ian

有一张门票上涨约this issue。

来源

2017-08-25 20:46:05 Tozo

Boostrap 4非常有问题。我的建议是，以取代：

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

有了：

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

，第二个看起来几乎是相同的，不会失败。

为了更好看，尝试：

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

来源

2018-01-28 05:18:53

Bootstrap 4现在已经稳定发布，这个问题在他们之前正确地实施验证。 – Ian

工作使用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>

来源

2018-03-03 18:59:25 manix

Bootstrap 4无效反馈输入组不显示

回答

相关问题