UI中修剪了react-bootstrap-table2自定义验证器错误消息

Question

我根据this example写了一个单元格验证器（以下是原始代码的简短版本）：

{
    text: 'IPv4', 
    dataField: 'IPv4',
    validator: (newValue, row, column) => {
        if (!isValidIP(newValue)) {
            return {
                valid: false,
                message: 'Must be a valid IP address'
            };
        }
        return true;
    }
};

逻辑工作正常，但是由于某些原因，错误消息被裁剪：

更新：

我检查了html，发现当验证方法返回时，以下组件已添加到html文件中：

<div class="alert alert-danger in" role="alert">
    <strong>Must be a valid IP address</strong>
</div>

当我从类中删除“ alert”属性时，消息正确显示：

<div class="alert-danger in" role="alert">
    <strong>Must be a valid IP address</strong>
</div>

任何想法为什么会发生以及如何以编程方式删除警报？

Answer 1

好，由于以下css配置，原来是css问题：

.alert {
  left: -50%;
  z-index: 100;
}

一旦我将其删除，错误消息和单元格文本就会对齐。