英文:
Image above form in Bootstrap 5
问题
我正在尝试制作一个响应式网页（使用Bootstrap），其中包含一个图像在一个表单上方。由于图像非常大，它被放置在一个“窥视视图”容器中，只显示其中的一小部分，并具有水平和垂直滚动。
在我的CSS中，我使用两层包含图像的容器，如下所示：
.outer-container-for-image {
width: 400px;
height: 300px;
overflow: auto; /* 激活滚动条 */
}
.inner-container-for-image {
position: relative;
width: 1000px;
height: 800px;
}
.inner-container-for-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
在移动和桌面视图下，我在Google Chrome中获得以下结果：
移动视图：
桌面视图：
在移动输出中，图像几乎正确居中（略微靠右），但文本字段没有居中，图像的宽度与文本字段不同。
在桌面输出中，图像和文本字段都没有正确居中（它们左对齐），而且图像的宽度与文本字段不同。
如何修复这个问题？
英文:
I am trying to make a responsive webpage (using Bootstrap) containing an image above a form. Since the image is very large, it is put in a "peek-view" container which shows only a
a small part of it and has both horizontal and vertical scrolling.
In my CSS, I use two layers of containers containing my image, as follows :
.outer-container-for-image {
width: 400px;
height: 300px;
overflow: auto; /* Activate scrollbars */
}
.inner-container-for-image {
position: relative;
width: 1000px;
height: 800px;
}
.inner-container-for-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
I get the following results in Google Chrome, for a mobile and desktop viewport respectively :
In the mobile output, the image is centered (almost) correctly (it is slightly nearer the right than the left), but the text field is not and the image does not have the same width as the text field.
In the desktop output, neither the image nor the text field is centered correctly (they are left-aligned) and
the image does not have the same width as the text field.
How can I fix this?
My source code :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@charset "UTF-8";
/*!
* Bootstrap v5.2.3 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root {
/* 8 */
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-bg: #fff;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-2xl: 2rem;
--bs-border-radius-pill: 50rem;
--bs-link-color: #0d6efd;
--bs-link-hover-color: #0a58ca;
--bs-code-color: #d63384;
--bs-highlight-bg: #fff3cd;
}
/* 79*/
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
/* 84 */
scroll-behavior: smooth;
}
}
body {
/* 89 */
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
label {
/* 332 */
display: inline-block;
}
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
/* 627 */
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-right: auto;
margin-left: auto;
}
.row {
/* 662 */
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row>* {
/* 671 */
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
.col-12 {
/* 779 */
flex: 0 0 auto;
width: 100%;
}
.m-4 {
/* 7412 */
margin: 1.5rem !important;
}
.pt-4 {
/* 7706 */
padding-top: 1.5rem !important;
}
:root,
:host {
/* 18956 */
--fa-style-family-brands: "Font Awesome 6 Brands";
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}
:root,
:host {
/* 20982 */
--fa-style-family-classic: "Font Awesome 6 Free";
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}
:root,
:host {
/* 21004 */
--fa-style-family-classic: "Font Awesome 6 Free";
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
}
.outer-container-for-image {
/* 21026 */
width: 400px;
height: 300px;
overflow: auto;
/* Activate scrollbars */
}
.inner-container-for-image {
/* 21033 */
position: relative;
width: 1000px;
height: 800px;
}
.inner-container-for-image img {
/* 21039 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.order-form .container {
/* 21099 */
color: #4c4c4c;
padding: 20px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
max-width: 650px;
}
.order-form-label {
/* 21106 */
margin: 8px 0 0 0;
font-size: 14px;
font-weight: bold;
}
<!-- language: lang-html -->
<section class="order-form m-4">
<div class="container pt-4">
<div class="row">
<div class="col-12">
<div class="row">
<div class="outer-container-for-image">
<div class="inner-container-for-image">
<img src="https://i.ibb.co/zsLb5NY/large-beach.png" alt="Big image">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row mt-3 mx-4">
<div class="col-12">
<label class="order-form-label" for="text-field">Name</label>
</div>
<div class="col-12">
<div class="form-outline datepicker" data-mdb-toggle-button="false">
<input type="text" class="form-control order-form-input" id="text-field" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js
"></script>
<!-- end snippet -->
答案1
得分: 1
我重构了你的代码，因为有很多必要的元素（例如，嵌套的网格）。除此之外，你需要添加以下内容：
- 在
row上添加d-flex justify-content-center - 在
outer-container-for-image上添加mx-auto mw-100
请查看下面的代码片段。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@charset "UTF-8";
/* Bootstrap CSS 样式 */
/* CSS 样式省略 */
/* 你的自定义 CSS 样式 */
.outer-container-for-image {
width: 400px;
height: 300px;
overflow: auto;
/* 启用滚动条 */
}
.inner-container-for-image {
position: relative;
width: 1000px;
height: 800px;
}
.inner-container-for-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.order-form .container {
color: #4c4c4c;
padding: 20px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
max-width: 650px;
}
/* CSS 样式省略 */
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<section class="order-form m-4">
<div class="container pt-4">
<div class="row d-flex justify-content-center">
<div class="col-12">
<div class="outer-container-for-image mx-auto mw-100">
<div class="inner-container-for-image">
<img src="https://i.ibb.co/zsLb5NY/large-beach.png" alt="Big image">
</div>
</div>
</div>
<div class="col-12 mt-3 mx-4">
<label class="order-form-label" for="text-field">Name</label>
<div class="form-outline datepicker" data-mdb-toggle-button="false">
<input type="text" class="form-control order-form-input" id="text-field" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
<!-- end snippet -->
这是你代码的翻译部分。
英文:
I refactored your code because you had a lot of necessary elements (e.g., nested grids). Other than that, you need to add the following:
d-flex justify-content-centerto therowmx-auto mw-100to theouter-container-for-image
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@charset "UTF-8";
/*!
* Bootstrap v5.2.3 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root {
/* 8 */
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-bg: #fff;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-2xl: 2rem;
--bs-border-radius-pill: 50rem;
--bs-link-color: #0d6efd;
--bs-link-hover-color: #0a58ca;
--bs-code-color: #d63384;
--bs-highlight-bg: #fff3cd;
}
/* 79*/
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
/* 84 */
scroll-behavior: smooth;
}
}
body {
/* 89 */
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
label {
/* 332 */
display: inline-block;
}
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
/* 627 */
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-right: auto;
margin-left: auto;
}
.row {
/* 662 */
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row>* {
/* 671 */
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
.col-12 {
/* 779 */
flex: 0 0 auto;
width: 100%;
}
.m-4 {
/* 7412 */
margin: 1.5rem !important;
}
.pt-4 {
/* 7706 */
padding-top: 1.5rem !important;
}
:root,
:host {
/* 18956 */
--fa-style-family-brands: "Font Awesome 6 Brands";
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}
:root,
:host {
/* 20982 */
--fa-style-family-classic: "Font Awesome 6 Free";
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}
:root,
:host {
/* 21004 */
--fa-style-family-classic: "Font Awesome 6 Free";
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
}
.outer-container-for-image {
/* 21026 */
width: 400px;
height: 300px;
overflow: auto;
/* Activate scrollbars */
}
.inner-container-for-image {
/* 21033 */
position: relative;
width: 1000px;
height: 800px;
}
.inner-container-for-image img {
/* 21039 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.order-form .container {
/* 21099 */
color: #4c4c4c;
padding: 20px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
max-width: 650px;
}
.order-form-label {
/* 21106 */
margin: 8px 0 0 0;
font-size: 14px;
font-weight: bold;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<section class="order-form m-4">
<div class="container pt-4">
<div class="row d-flex justify-content-center">
<div class="col-12">
<div class="outer-container-for-image mx-auto mw-100">
<div class="inner-container-for-image">
<img src="https://i.ibb.co/zsLb5NY/large-beach.png" alt="Big image">
</div>
</div>
</div>
<div class="col-12 mt-3 mx-4">
<label class="order-form-label" for="text-field">Name</label>
<div class="form-outline datepicker" data-mdb-toggle-button="false">
<input type="text" class="form-control order-form-input" id="text-field" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论