我想要這樣的東西
所以我做了以下
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
<div class="account-box">
<div class="picture_account">
<img src="~/images/d2.jpg" class="imgFormat " />
</div>
<div class="account-box-content mt-4">
<h4>Register</h4>
<form method="post" class="form-group ">
<div class="row pt-2">
<div style="display:inline">
<label>Name </label>
<input type="text" class="col-md-4" id="FirstName">
</div>
<div style="display:inline">
<label>Lastname </label>
<input type="text" class="col-md-4" id="LastName">
</div>
</div>
<div class="row pt-2">
<div>
<label>Email </label>
<input type="email" class="col-md-8" id="Email" />
</div>
</div>
<div class="row pt-2">
<div>
<label>Mobile </label>
<input type="text" class="col-md-8" id="Mobile">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
這是CSS
.page-account-box .account-box .account-box-content {
min-height: 50%;
padding: 15px 20px;
text-align: center;
border-radius: 20px;
display: inline;
border: 2px solid black;
width: 100%;
}
.page-account-box .account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
-webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 70px auto 30px;
display: flex;
background: #fff;
border-radius: 20px;
}
但它變成了這樣
我該怎么做？
uj5u.com熱心網友回復：
使用引導類并洗掉display:inline;
col應該是row班級的直系子女
html
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-md-9 mx-auto">
<div class="account-box">
<div class="account-box-content mt-4">
<h4>Register</h4>
<form method="post" class="form-group ">
<div class="row pt-2 ">
<div class="col-6">
<div class="row">
<div class="col-8">
<input type="text" id="FirstName">
</div>
<label class="col-4">Name </label>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-8">
<input type="text" id="LastName">
</div>
<label class="col-4">Lastname </label>
</div>
</div>
</div>
<div class="row pt-2">
<div class="col-10">
<input type="email" class="w-100" id="Email" />
</div>
<label class="col-2">Email </label>
</div>
<div class="row pt-2">
<div class="col-10">
<input type="text" class="w-100" id="Mobile">
</div>
<label class="col-2">Mobile </label>
</div>
</form>
</div>
<div class="picture_account">
<img src="~/images/d2.jpg" class="imgFormat " />
</div>
</div>
</div>
</div>
</div>
</div>
css
.page-account-box .account-box .account-box-content {
min-height: 50%;
padding: 15px 20px;
text-align: center;
border-radius: 20px;
/* display: inline; */
border: 2px solid black;
width: 100%;
}
.page-account-box .account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
-webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 70px auto 30px;
display: flex;
background: #fff;
border-radius: 20px;
}
.account-box-content form label{
text-align: right;
}
uj5u.com熱心網友回復：
.page-account-box .account-box .account-box-content {
min-height: 50%;
padding: 15px 20px;
text-align: center;
border-radius: 20px;
/* display: inline; also remove this */
border: 2px solid black;
width: 100%;
}
.page-account-box .account-box {
width: 150%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
-webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 70px auto 30px;
display: flex;
background: #fff;
border-radius: 20px;
}
#label{
margin-left: 10px;
}
.Name{
margin-left: 10px;
}
.email{
margin-left: 10px;
}
#FirstName{
margin-left: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<!--Body-->
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
<div class="account-box">
<div class="account-box-content mt-4">
<h4>Register</h4>
<form method="post" class="form-group">
<div class="row pt-2">
<div class="col-md-6" id="LastName">
<input type="text" class="col-md-6" >
<label id="label">LastName </label>
</div>
<div class="col-md-6">
<input type="text" class="col-md-6" id="FirstName">
<label class="Name">Name </label>
</div>
</div>
<div class="row pt-2">
<div class="col-md-12">
<input type="email" class="col-md-10" id="Email" />
<label class="email">Email </label>
</div>
</div>
<div class="row pt-2">
<div class="col-md-12">
<input type="text" class="col-md-10" id="Mobile">
<label>Mobile </label>
</div>
</div>
</form>
</div>
<div class="picture_account">
<img src="https://via.placeholder.com/200.jpg" class="imgFormat" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432849.html