Html 引导-在屏幕大小更改时将文本从一个div移动到另一个div
我正在尝试创建一个包含两列的登录屏幕 在大屏幕上：左栏=登录控件，右栏=图像 在小屏幕上：上栏=图像，下栏=登录控件 它按预期工作。如以下截图所示： 到目前为止，它运行良好。但是，我希望“登录”和“欢迎”文本出现在较小屏幕上的图像中 要了解我正在努力实现的目标，请查看此网站登录页面。他们做到了： 这是到目前为止我的代码Html 引导-在屏幕大小更改时将文本从一个div移动到另一个div,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我正在尝试创建一个包含两列的登录屏幕 在大屏幕上：左栏=登录控件，右栏=图像 在小屏幕上：上栏=图像，下栏=登录控件 它按预期工作。如以下截图所示： 到目前为止，它运行良好。但是，我希望“登录”和“欢迎”文本出现在较小屏幕上的图像中 要了解我正在努力实现的目标，请查看此网站登录页面。他们做到了： 这是到目前为止我的代码 <div class="container-fluid fullheight"> <div class="row fullheight">
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
<a href="#">Forgot password</a>
</div>
</div>
</div>
这是我的图像面板
登录
欢迎来到MySite。请使用您的电子邮件id和密码登录以访问您的
简介、报告和订单
记得我吗
登录
<style>
.fullheight {
height: 100%;
min-height: 100%;
}
html,
body {
height: 100%;
}
.loginarea {
margin-top: 100px;
padding-right: 20px;
padding-left: 20px;
}
</style>
.全高{
身高：100%；
最小高度：100%；
}
html，
身体{
身高：100%；
}
罗吉纳雷亚酒店{
边缘顶部：100px；
右边填充：20px；
左侧填充：20px；
}
如何使文本行流入图像且白色区域仅包含登录框？如果您使用的是最新版本的引导程序，即版本4，则应使用d-*类，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
<div class="loginarea d-sm-none">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<div class="d-none d-sm-block">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
<a href="#">Forgot password</a>
</div>
</div>
</body>
</html>
文件
这是我的图像面板
登录
欢迎来到MySite。请使用您的电子邮件id和密码登录以访问您的
简介、报告和订单
登录
欢迎来到MySite。请使用您的电子邮件id和密码登录以访问您的
简介、报告和订单
记得我吗
登录