html - 将自定义表单错误置于不同的响应模式下

原文 标签 html css validation bootstrap-4

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

enter image description here
但是在响应模式下,它显示如下:
enter image description here
由于错误框是绝对定位的元素,我想知道如何使其在移动设备和平板电脑上能够响应时更好地显示?

错误框应显示为第一张图片,但错误框应显示在手机/平板电脑中的搜索(忘记更改为登录)按钮之前。

我没有使用jqueryvalidation。这些错误将在.net核心中输出,但是目前对我来说这是一个痛苦的定位。



.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>

最佳答案

检查这个



.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>

关于html - 将自定义表单错误置于不同的响应模式下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49333350/

相关文章:

jquery - 包含导航栏的流体图像

html - 我的背景未在某些移动浏览器中显示

python - 在两个数据帧之间执行相等检查

java - 如何验证表单页面中的整数输入?

html - 标题标签未正确填充...我想用灰色隐藏白色

html - 在gmail中未显示将html功能添加到utl_smtp,但是在另存为.html文件并在浏览器中打开时显示

javascript - 如果可能,关闭所有打开的下拉菜单并合并代码

javascript - 如何通过jquery if else语句设置相同的高度值

html - css 缩放背景图像

validation - 将Grails验证代码保留在域对象中