在UI中显示react-bootstrap-table2自定义验证器错误消息

Question

我根据这个例子编写了一个单元验证器（以下是原始代码的较短版本）：

{
    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;
}

删除后，错误消息和单元格文本对齐。