Question

我有一个表单，其中包含使用input-append类的附加图标的输入。我正在表单上进行服务器端验证。

如果返回了错误消息，那么我将消息添加到与div（具有类invalid-feedback相同的父级中的input类的is-invalid }）。控制错误消息可见性的CSS选择器是.form-control.is-invalid ~ .invalid-feedback。

我的问题来自input-append，其中包含以下CSS选择器.input-group > .input-group-append:not(:last-child) > .input-group-text。这决定了附加的div是否是最后一个，并且如果它是圆角，则会对其进行舍入。

但是，<div class="invalid-feedback">成为:last-child，因此input-group-append不会出现圆角。下面的代码段显示了这一点。

这是一个已知的Bootstrap问题，还是我做错了什么？

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">

  <title>Bootstrap 4</title>
</head>

<body>
  <div class="row p-3">
    <div class="col-md-6 mb-3">
      <label class="sr-only">End Date/Time</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Start Date</div>
        </div>

        <input type="text" class="form-control is-invalid" placeholder="Date Input">
        <div class="input-group-append">
          <div class="input-group-text"><i class="oi oi-calendar"></i></div>
        </div>
        <div class="invalid-feedback">
          Error Message
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

目前有一些known issues具有Bootstrap 4输入组和验证类。

我找到的解决方法是将invalid-feeback保留在input-group内的倒数第二个元素，以便input-group-append仍然是最后一个孩子。这允许input-group-append具有适当的圆角。然后使用order-last上的invalid-feedback实用程序类，以便最后显示。

https://www.codeply.com/go/DMDBmq8TJg

<div class="row p-3">
    <div class="col-md-6 mb-3">
        <label class="sr-only">End Date/Time</label>
        <div class="input-group ">
            <div class="input-group-prepend">
                <div class="input-group-text">Start Date</div>
            </div>
            <input type="text" class="form-control is-invalid" placeholder="Date Input">
            <div class="invalid-feedback order-last ">
                Error Message
            </div>
            <div class="input-group-append">
                <div class="input-group-text"><i class="oi oi-calendar"></i> 
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

在进行了一些挖掘之后，似乎这是一个已知问题。请参阅GitHub上的issue #25110。我没有找到它，因为我没有找到正确的东西。

用户 cbossi suggets a fix使用order类。有关示例，请参阅下面的代码段。基本上，要使错误消息div不是:last-child的{{1}}，请将其放在附加组之前。然后使用input-group类重新排序内容。

order-1

Bootstrap 4服务器端验证和输入组追加

2 个答案: