英文:
Removing vertical scroll from a page using bootstrap 5 responsive design
问题
你好，以下是翻译的内容：
我正在将一个Figma设计转换成HTML页面，并使用Bootstrap 5。以下是Figma设计的样子：
问题是我在页面上得到了一个垂直滚动条。红色框中突出显示的空间是导致这种情况的原因。
col div内的图像高度没有导致垂直溢出。列高度是如何设置的？
我尝试设置图像div的高度，但这样会使图像的高度变得非常小。我不想手动更改类的高度。我想知道的是在使用响应式的行/列类时，div的高度是如何设置的。
以下是我所做的代码：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
font-family: "Poppins", sans-serif;
/* ...（其余CSS样式） ... */
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ...（其余头部信息） ... -->
</head>
<body style="height: 100vh">
<nav class="navbar">
<!-- ...（其余导航栏内容） ... -->
</nav>
<div class="container px-5">
<div class="row">
<div class="col-md-8 left-col">
<!-- ...（其余左侧列内容） ... -->
</div>
<div class="col-md-4 right-col">
<!-- ...（其余右侧列内容） ... -->
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
在 CodePen 上检查：https://codepen.io/junaidaslam/pen/WNYRRzK?editors=1100
英文:
I am converting a Figma design to an HTML page and using Bootstrap 5. Here's how the Figma design looks:
The issue is that I am getting a vertical scroll bar on the page. The following highlighted space in the red box is causing it.
The image height inside the col div does not force it to vertically overflow. How is the column height being set?
I have tried setting the height of the image div, but then it makes the image height really small. I do not want to change the height of the class manually. What I want to know is how is the div height being set when I am using responsive row/col classes.
Here's the code I've done:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
font-family: "Poppins", sans-serif;
h4 {
font-weight: 600;
}
.left-col {
padding-top: 200px;
}
input[type="text"] {
background-color: #f0efff;
height: 62px;
}
input[type="text"]:focus {
background-color: #f0efff;
border-radius: 10%;
}
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #a7a3ff !important;
font-size: 15px !important;
}
input::-moz-placeholder {
/* Firefox 19+ */
color: #a7a3ff !important;
font-size: 15px !important;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: #a7a3ff !important;
font-size: 15px !important;
}
input:-moz-placeholder {
/* Firefox 18- */
color: #a7a3ff !important;
font-size: 15px !important;
}
a {
font-size: 13px;
}
.continue-with {
font-size: 16px;
clear: #b5b5b5;
}
.btn-login {
height: 60px;
border-radius: 10px;
}
.btn-round {
border-radius: 50%;
height: 40px;
padding: 0;
}
.btn-round img {
width: 100%;
height: 100%;
object-fit: contain;
}
.image {
position: relative;
bottom: 10%;
height: 75%;
right: 5%;
}
.right-col {
padding-top: 100px;
padding-bottom: 100px;
}
.btn-primary {
background-color: #4d47c3 !important;
}
.text-primary {
color: #4d47c3 !important;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="./login-1.css" rel="stylesheet" />
</head>
<body style="height: 100vh">
<nav class="navbar">
<div class="container-fluid">
<a style="font-weight: bold" class="navbar-brand text-dark text-decoration-none" href="#">Your logo</a
>
</div>
</nav>
<div class="container px-5">
<div class="row">
<div class="col-md-8 left-col">
<div class="row mb-4">
<div class="col">
<h1 style="font-weight: bold" class="py-2">Sign in to</h1>
<h4 style="font-size: 35px">Lorem Ipsum is simply</h4>
</div>
</div>
<div class="row py-4">
<div class="col-md-5">
<div class="pt-2" style="font-size: 16px">
If you don’t have an account register.<br />
You can
<span class="text-primary" style="font-weight: bold"
>Register here!</span
>
</div>
</div>
<div class="col-md-7">
<img
src="https://raw.githubusercontent.com/jaslam94/figma-exercises/main/login-1/assets/images/saly-14.png"
alt="image"
class="image"
/>
</div>
</div>
</div>
<div class="col-md-4 right-col">
<h4 class="mb-4">Sign in</h4>
<form>
<div class="mb-4">
<input
class="form-control px-3 border-0"
type="text"
name="Email"
placeholder="Enter email or user name"
/>
</div>
<div class="mb-2">
<input
class="form-control px-3 mb-2 border-0"
type="text"
name="Password"
placeholder="Password"
/>
<a
href="#"
class="text-decoration-none form-text float-end"
style="color: #b5b5b5"
>Forgot Password?</a
>
</div>
<div class="d-grid gap-2 mt-5">
<input
type="submit"
value="Login"
class="btn btn-primary btn-login shadow-lg"
/>
</div>
</form>
<div class="form-text continue-with text-center py-5">
or continue with
</div>
<div class="row justify-content-center">
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img
src="/login-1/assets/logos/facebook-icon.png"
alt="Facebook Icon"
/>
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/apple-icon.png" alt="Apple Icon" />
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/google-icon.png" alt="Google Icon" />
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
Check on CodePen: https://codepen.io/junaidaslam/pen/WNYRRzK?editors=1100
答案1
得分: 1
请尝试以下内容。
<div class="container px-5">
<div class="row justify-content-around align-items-center" style="height: 90vh;">
<div class="col-md-8 left-col">
<div class="mb-4">
<h1 style="font-weight: bold;" class="py-2">登录到</h1>
<h4 style="font-size: 35px;">Lorem Ipsum只是</h4>
</div>
<div class="d-flex py-4">
<div class="pt-2" style="font-size: 16px;">
如果您没有帐户，请注册。<br>
您可以
<span class="text-primary" style="font-weight: bold;">在此注册！</span>
</div>
<div>
<img src="/assets/images/saly-14.png" alt="图像" class="" style="position: absolute; top: 395px; width: 15%;">
</div>
</div>
</div>
<div class="col-md-4 right-col">
<h4 class="mb-4">登录</h4>
<form>
<div class="mb-4 form-group">
<input class="form-control px-3 border-0" type="text" name="Email" placeholder="输入电子邮件或用户名">
</div>
<div class="mb-3 form-group">
<input class="form-control px-3 border-0" type="text" name="Password" placeholder="密码">
</div>
<div class="mb-5 form-group text-end"><a href="#" class="text-decoration-none ">忘记密码？</a></div>
<div class="form-group">
<input type="submit" value="登录" class="btn btn-primary btn-login w-100">
</div>
</form>
<div class="form-text continue-with text-center py-5">或者继续使用</div>
<div class="row justify-content-center">
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/assets/logos/facebook-icon.png" alt="Facebook图标">
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/assets/logos/apple-icon.png" alt="苹果图标">
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/assets/logos/google-icon.png" alt="谷歌图标">
</a>
</div>
</div>
</div>
</div>
</div>
英文:
Try the following.
<div class="container px-5">
<div class="row justify-content-around align-items-center" style="
height: 90vh;
">
<div class="col-md-8 left-col">
<div class="mb-4">
<h1 style="font-weight: bold;" class="py-2">Sign in to</h1>
<h4 style="font-size: 35px;">Lorem Ipsum is simply</h4>
</div>
<div class="d-flex py-4">
<div class="pt-2" style="font-size: 16px;">
If you don’t have an account register.<br>
You can
<span class="text-primary" style="font-weight: bold;">Register here!</span>
</div>
<div>
<img src="/assets/images/saly-14.png" alt="image" class="" style="
position: absolute;
top: 395px;
width: 15%;
">
</div>
</div>
</div>
<div class="col-md-4 right-col">
<h4 class="mb-4">Sign in</h4>
<form>
<div class="mb-4 form-group">
<input class="form-control px-3 border-0" type="text" name="Email" placeholder="Enter email or user name">
</div>
<div class="mb-3 form-group">
<input class="form-control px-3 border-0" type="text" name="Password" placeholder="Password">
</div>
<div class="mb-5 form-group text-end"><a href="#" class="text-decoration-none ">Forgot Password?</a></div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-primary btn-login w-100">
</div>
</form>
<div class="form-text continue-with text-center py-5">
or continue with
</div>
<div class="row justify-content-center">
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/assets/logos/facebook-icon.png" alt="Facebook Icon">
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/assets/logos/apple-icon.png" alt="Apple Icon">
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/assets/logos/google-icon.png" alt="Google Icon">
</a>
</div>
</div>
</div>
</div>
</div>
答案2
得分: 0
请考虑以下代码，我已从代码中移除了left-col和right-col的内边距，这些内边距会占用空间并生成滚动条。
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
font-family: "Poppins", sans-serif;
}
h4 {
font-weight: 600;
}
.left-col {
// padding-top: 200px;
}
input[type="text"] {
background-color: #f0efff;
height: 62px;
}
input[type="text"]:focus {
background-color: #f0efff;
border-radius: 10%;
}
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #a7a3ff !important;
font-size: 15px !important;
}
input::-moz-placeholder {
/* Firefox 19+ */
color: #a7a3ff !important;
font-size: 15px !important;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: #a7a3ff !important;
font-size: 15px !important;
}
input:-moz-placeholder {
/* Firefox 18- */
color: #a7a3ff !important;
font-size: 15px !important;
}
a {
font-size: 13px;
}
.continue-with {
font-size: 16px;
clear: #b5b5b5;
}
.btn-login {
height: 60px;
border-radius: 10px;
}
.btn-round {
border-radius: 50%;
height: 40px;
padding: 0;
}
.btn-round img {
width: 100%;
height: 100%;
object-fit: contain;
}
.image {
position: relative;
bottom: 10%;
height: 75%;
right: 5%;
}
.right-col {
// padding-top: 100px;
// padding-bottom: 100px;
}
.btn-primary {
background-color: #4d47c3 !important;
}
.text-primary {
color: #4d47c3 !important;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="./login-1.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<a style="font-weight: bold" class="navbar-brand text-dark text-decoration-none" href="#">Your logo</a>
</div>
</nav>
<div class="container px-5">
<div class="row">
<div class="col-md-8">
<div class="row mb-4">
<div class="col">
<h1 style="font-weight: bold" class="py-2">Sign in to</h1>
<h4 style="font-size: 35px">Lorem Ipsum is simply</h4>
</div>
</div>
<div class="row py-4">
<div class="col-md-5">
<div class="pt-2" style="font-size: 16px">
If you don’t have an account register.<br />
You can
<span class="text-primary" style="font-weight: bold">Register here!</span>
</div>
</div>
<div class="col-md-7">
<img src="https://raw.githubusercontent.com/jaslam94/figma-exercises/main/login-1/assets/images/saly-14.png" alt="image" class="image" />
</div>
</div>
</div>
<div class="col-md-4">
<h4 class="mb-4">Sign in</h4>
<form>
<div class="mb-4">
<input class="form-control px-3 border-0" type="text" name="Email" placeholder="Enter email or user name" />
</div>
<div class="mb-2">
<input class="form-control px-3 mb-2 border-0" type="text" name="Password" placeholder="Password" />
<a href="#" class="text-decoration-none form-text float-end" style="color: #b5b5b5">Forgot Password?</a>
</div>
<div class="d-grid gap-2 mt-5">
<input type="submit" value="Login" class="btn btn-primary btn-login shadow-lg" />
</div>
</form>
<div class="form-text continue-with text-center py-5">
or continue with
</div>
<div class="row justify-content-center">
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/facebook-icon.png" alt="Facebook Icon" />
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/apple-icon.png" alt="Apple Icon" />
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/google-icon.png" alt="Google Icon" />
</a>
</div>
</div>
</div>
</div>
</div>
</body>
英文:
Kindly consider this code, I have removed left-col and right-col padding from the code, which is consuming the space and generating the scroll.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
font-family: "Poppins", sans-serif;
h4 {
font-weight: 600;
}
.left-col {
// padding-top: 200px;
}
input[type="text"] {
background-color: #f0efff;
height: 62px;
}
input[type="text"]:focus {
background-color: #f0efff;
border-radius: 10%;
}
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #a7a3ff !important;
font-size: 15px !important;
}
input::-moz-placeholder {
/* Firefox 19+ */
color: #a7a3ff !important;
font-size: 15px !important;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: #a7a3ff !important;
font-size: 15px !important;
}
input:-moz-placeholder {
/* Firefox 18- */
color: #a7a3ff !important;
font-size: 15px !important;
}
a {
font-size: 13px;
}
.continue-with {
font-size: 16px;
clear: #b5b5b5;
}
.btn-login {
height: 60px;
border-radius: 10px;
}
.btn-round {
border-radius: 50%;
height: 40px;
padding: 0;
}
.btn-round img {
width: 100%;
height: 100%;
object-fit: contain;
}
.image {
position: relative;
bottom: 10%;
height: 75%;
right: 5%;
}
.right-col {
// padding-top: 100px;
// padding-bottom: 100px;
}
.btn-primary {
background-color: #4d47c3 !important;
}
.text-primary {
color: #4d47c3 !important;
}
}
<!-- language: lang-html -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="./login-1.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<a style="font-weight: bold" class="navbar-brand text-dark text-decoration-none" href="#">Your logo</a>
</div>
</nav>
<div class="container px-5">
<div class="row">
<div class="col-md-8">
<div class="row mb-4">
<div class="col">
<h1 style="font-weight: bold" class="py-2">Sign in to</h1>
<h4 style="font-size: 35px">Lorem Ipsum is simply</h4>
</div>
</div>
<div class="row py-4">
<div class="col-md-5">
<div class="pt-2" style="font-size: 16px">
If you don’t have an account register.<br />
You can
<span class="text-primary" style="font-weight: bold">Register here!</span>
</div>
</div>
<div class="col-md-7">
<img src="https://raw.githubusercontent.com/jaslam94/figma-exercises/main/login-1/assets/images/saly-14.png" alt="image" class="image" />
</div>
</div>
</div>
<div class="col-md-4">
<h4 class="mb-4">Sign in</h4>
<form>
<div class="mb-4">
<input class="form-control px-3 border-0" type="text" name="Email" placeholder="Enter email or user name" />
</div>
<div class="mb-2">
<input class="form-control px-3 mb-2 border-0" type="text" name="Password" placeholder="Password" />
<a href="#" class="text-decoration-none form-text float-end" style="color: #b5b5b5">Forgot Password?</a>
</div>
<div class="d-grid gap-2 mt-5">
<input type="submit" value="Login" class="btn btn-primary btn-login shadow-lg" />
</div>
</form>
<div class="form-text continue-with text-center py-5">
or continue with
</div>
<div class="row justify-content-center">
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/facebook-icon.png" alt="Facebook Icon" />
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/apple-icon.png" alt="Apple Icon" />
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/google-icon.png" alt="Google Icon" />
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论