html - 在不同的响应模式下定位自定义表单错误

Question

我有一个引导导航，右边有一个表单。我还有一个自定义错误框，我想像这样显示在浏览器表单的底部。

但是在响应模式下，它显示如下: 由于错误框是一个绝对定位的元素，我想知道如何让它更好地显示，因为它对移动设备和平板电脑有响应？

错误框应该像第一张图片一样显示，但错误框应该显示在移动/平板电脑的搜索(忘记更改为登录)按钮之前。

我没有使用 jqueryvalidation。这些错误将在.net core 中输出，但目前定位它们对我来说是一个痛苦。

.navbar {
  min-height: 70px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navbar-brand {
  height: 70px;
  line-height: 55px;
}

.navbar-toggler {
  border: 0 !important;
  border-radius: 0 !important;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: 0;
}

.dropdown-menu {
  border-color: #eee;
  border-radius: 0;
}

.error {
  background-color: red;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  top: 65px;
  right: 240px;
}

.arr {
  width: 0;
  height: 0;
  position: absolute;
  top: -7px;
  margin-left: 80px;
  text-indent: -9999px;
  border-right: 8px solid transparent;
  border-bottom: 8px solid blue;
  border-left: 8px solid transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light py-0">
  <div class="container-fluid px-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <form class="form-inline my-2 my-lg-0 ml-auto">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        <div class="error">
          <div class="arr"></div>
          <p>error box with validation</p>
        </div>
      </form>
    </div>
  </div>
</nav>

Answer 1

检查这个

.navbar {
  min-height: 70px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navbar-brand {
  height: 70px;
  line-height: 55px;
}

.navbar-toggler {
  border: 0 !important;
  border-radius: 0 !important;
}
.navbar-collapse{
position:relative
}

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: 0;
}

.dropdown-menu {
  border-color: #eee;
  border-radius: 0;
}

.error {
  background-color: red;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  top: 65px;
  right: 240px;
}

.arr {
  width: 0;
  height: 0;
  position: absolute;
  top: -7px;
  margin-left: 80px;
  text-indent: -9999px;
  border-right: 8px solid transparent;
  border-bottom: 8px solid blue;
  border-left: 8px solid transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light py-0">
  <div class="container-fluid px-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <form class="form-inline my-2 my-lg-0 ml-auto">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        <div class="error">
          <div class="arr"></div>
          <p>error box with validation</p>
        </div>
      </form>
    </div>
  </div>
</nav>