Html 响应引导登录表单
我正在使用bootstrap为我的web应用程序构建一个登录表单。我使用了下面的“元标签”使屏幕响应Html 响应引导登录表单,html,css,responsive-design,bootstrap-4,responsive,Html,Css,Responsive Design,Bootstrap 4,Responsive,我正在使用bootstrap为我的web应用程序构建一个登录表单。我使用了下面的“元标签”使屏幕响应 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 和多重组合的引导类的网格系统,但无济于事 <style> .overlay { /* Height & width depends on how you want to reveal the overlay (
<meta name="viewport" content="width=device-width, initial-scale=1.0">
和多重组合的引导类的网格系统,但无济于事
<style>
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(51, 51, 255, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 20%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.覆盖{
/*高度和宽度取决于您想要显示覆盖的方式(请参见下面的JS)*/
身高:100%;
宽度:0;
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
左:0;
排名:0;
背景色:rgb(0,0,0);/*黑色后备色*/
背景色:rgba(51,51,255,0.9);/*黑色,不透明度*/
溢出-x:隐藏;/*禁用水平滚动*/
过渡:0.5s;/*0.5秒过渡效果以滑入或滑下覆盖层(高度或宽度,取决于分隔缝)*/
}
/*将内容放置在覆盖内*/
.覆盖内容{
位置:相对位置;
顶部:20%;/*25%*/
宽度:100%;/*100%宽度*/
文本对齐:居中;/*居中文本/链接*/
上边距:30px;/*30px上边距,以避免与较小屏幕上的关闭按钮冲突*/
}
/*覆盖中的导航链接*/
.覆盖{
填充:8px;
文字装饰:无;
字体大小:36px;
颜色:#818181;
显示:块;/*显示块而不是内联*/
过渡:0.3s;/*悬停时的过渡效果(颜色)*/
}
/*将鼠标悬停在导航链接上时,请更改其颜色*/
.overlay a:悬停,.overlay a:焦点{
颜色:#f1f1;
}
/*定位关闭按钮(右上角)*/
.overlay.closebtn{
位置:绝对位置;
}
/*当屏幕高度小于450像素时,更改链接的字体大小并再次定位关闭按钮,使它们不会重叠*/
@媒体屏幕和屏幕(最大高度:450像素){
.overlay a{font size:20px}
.overlay.closebtn{
字体大小:40px;
顶部:15px;
右:35px;
}
}
//包含登录表单代码的列
//登录表单代码
//注册表格代码
这是我的输出-
感谢任何关于我做错了什么以及如何去做的见解
非常感谢 尝试使用类表单组而不是登录表单和注册表单。 它可以使网络形式具有移动响应能力
检查:我提供这个作为答案,因为它太多了,无法在评论中发表 确保您正在使用
为了确保Bootstrap 4在Safari中正常工作,请使用shrink to fit=no
-请参阅
使用文本中心的引导类,而不是HTML属性align
-请参阅
因为根据您的示例,您的类总是会有col-XX-12
,所以只需使用col-12
。看
如上例所述,这是使用表单组的好地方
-请参阅
总的来说,请从
//包含登录表单代码的列
//登录表单代码
//注册表格代码
您正在使用bootstrap版本3或4?我认为需要更多的代码来解决您的问题。您可能在CSS中有其他内容,或者某个地方不允许页面的其余部分收缩。您可能正在设置宽度或其他内容。请包含更多代码。我还将为您提供一些有用的链接和提示,以便在此处发布。@kashalo我使用的是bootstrap 4您的代码对于BS4来说已经过时了(前缀-xs-
已不存在。在发布MCVE之前,您可能需要刷新从3.x迁移到4.x的过程:@adpro-是的。我们也没有足够的代码来真正了解网格是否正确插入(没有指示.row
或容器
)这可能是OP试图描述的布局问题的原因。col-
的使用应该是响应性的,而不是表单组
,尽管最好使用这一点。
<div id="myNav" class="overlay">
<div class="overlay-content">
<div class="container">
<div class="row">
<div class="col-12"> // column which contains the login form code
<div id="loginform">
// login form code
</div>
<div id="signupform">
// signup form code
</div>
</div>
</div>
</div>
</div>
<!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" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="col-12 text-center"> // column which contains the login form code
<div id="loginform">
// login form code
</div>
<div id="signupform">
// signup form code
</div>
</div>
</body>
</html>