我有一个引导导航,右边是一个表单。我也有一个自定义错误框,我想像这样在浏览器中的表单底部显示它。
但是在响应模式下,它显示如下:
由于错误框是绝对定位的元素,我想知道如何使其在移动设备和平板电脑上能够响应时更好地显示?
错误框应显示为第一张图片,但错误框应显示在手机/平板电脑中的搜索(忘记更改为登录)按钮之前。
我没有使用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>