我正在使用 Bootstrap 5。我在頁面上創建了 2 列。
這是我得到的輸出。
現在，我必須從左側欄的一端到另一端顯示橙色。所以我已經添加h-100到我的orange課程中，或者我可以添加height:100%到我的orange課程中。
現在我得到以下輸出
這是我的預期輸出
知道如何解決這個問題嗎？
.orange {
background-color: orange;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing">
</div>
<div class="col-lg-6">
<h2>Heading Two</h2>
<div class="orange h-100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
因為您使用的是引導程式，所以最好.container(your parent class)在更改引導程式類的樣式之前添加。
使用.container .row(Bootstrap class)
不影響專案中的所有 Bootstrap 行類
對于第二個解決方案
.container .col-lg-6
你可以擺脫h-100 并申請
.orange {
background-color: orange;
height: 100%;
}
.container .row{
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin: 0;
background-color: bisque;
}
.orange {
background-color: orange;
height: 100%;
}
.container .row {
overflow: hidden;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing">
</div>
<div class="col-lg-6">
<h2>Heading Two</h2>
<div class="orange ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>或者你可以申請
.container .col-lg-6{
display: flex;
flex-direction: column;
}
.orange {
background-color: orange;
flex-basis: 100%;
}
img {
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin: 0;
background-color: bisque;
}
.container .col-lg-6 {
display: flex;
flex-direction: column;
}
.orange {
background-color: orange;
flex-basis: 100%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing" />
</div>
<div class="col-lg-6">
<h2>Heading Two</h2>
<div class="orange">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>或類似于第一種方法但不使用overflow:hidden;
img{
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin:0;
background-color: bisque;
}
.container .col-lg-6{
display: flex;
flex-direction: column;
}
.orange {
background-color: orange;
height: 100%;
}<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing" />
</div>
<div class="col-lg-6">
<h2>Heading Two</h2>
<div class="orange">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
為避免弄亂溢位并充分使用 Bootstrap，請添加d-flex flex-column到正確的 col. Flex 元素具有匹配其兄弟大小的優勢。我個人的建議是h-100用 css 規則替換height: 100%并擺脫不必要的!important注釋。
.orange {
background-color: orange;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing">
</div>
<div class="col-lg-6 d-flex flex-column">
<h2>Heading Two</h2>
<div class="orange h-full">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 display-container" style="display: flex; flex-wrap: wrap;">
<div class="col-lg-6" style="display: flex; flex-direction: column;">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing">
</div>
<div class="col-lg-6" style="display: flex;flex-direction: column;">
<h2>Heading Two</h2>
<div class="orange h-full" style="height: 100%;background-color: orange;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
僅 Bootstrap 的解決方案包括將img-fluid類添加到您的影像中，以便它使用max-width: 100%;. 你有h-100，但有溢位，所以最好在你有自定義 div 的父級上使用d-flexwith ， .flex-column.orange
.orange {
background-color: orange;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Heading one</h2>
<img src="https://dummyimage.com/600x400/000/fff" alt="testing" class="img-fluid">
</div>
<div class="col-lg-6 d-flex flex-column">
<h2>Heading Two</h2>
<div class="orange h-100">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464151.html
上一篇：引導導航連續折疊而不是垂直折疊
下一篇：僅當我在輸入中時如何顯示影像