在這種情況下如何正確地將兩列排成一行
[英]How to place two columns in a row properly in this situation
問題描述
我正在使用 Bootstrap 我已經編碼了這個：
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
這段代碼的結果在這里：
如您所見，它將圖像列和內容列（產品標題、產品描述等）分開。
然而，它們都被放置在一個row類中。
那么如何像此處顯示的預期結果一樣將它們正確地放在一行中？
預期結果：
更新 #1
如果我從<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">刪除col-lg-12 col-md-12 col-sm-12 <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">的圖像列和內容列，並將col-6而不是col-12到兩個列類中，將出現此結果：
但是，如您所見，內容看起來更薄，並且與預期結果圖像仍然存在差異。
那么如何解決這個問題呢？
7 個解決方案
解決方案1
1 已采納 2021-07-24 10:51:08
您正在重復這些類並簡單地將這里的所有內容復雜化，您必須定義要中斷到整行的位置，它會在該屏幕尺寸下自動中斷，您無需明確添加另一個類，添加太多類會使您感到困惑和任何必須稍后理解代碼的人。 https://getbootstrap.com/docs/4.0/layout/grid/
<header> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </header> <div class="container"> <div class="row"> <div class="col-sm-6 "> <div class=""> <h1> Cat </h1> <p> The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. </p> </div> </div> <div class="col-sm-6 "> <div class="slider-slick-img container"> <div class="slider-for"> <img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100%" /> </div> <div class="slider-nav mt-5"> <div class="item px-2"> <img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100px" /> </div> </div> </div> </div> </div> </div>
解決方案2
0 2021-07-24 10:15:32
在您的兩列中，您都添加了col-12類，這意味着默認情況下，這些列將占用所有行，直到您到達第一個斷點，在本例中為col-sm 。 為了解決這個問題，您必須指定col-6而不是col-12並且如果您在小於 sm 的屏幕尺寸中檢查它，您會注意到每列在網格布局中最多占據 6 個位置。
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-6"> <div class="slider-slick-img container"> <div class="slider-for"> IMAGE GOES HERE </div> <div class="slider-nav mt-5"> <div class="item px-2"> THUBMNAIL GOES HERE </div> </div> </div> </div> <div class="col-6"> CONTENT GOES HERE </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
解決方案3
0 2021-07-24 10:18:28
將帶有內容的 div 放在第一位，然后放置帶有圖像的 div 似乎正確地反映了此布局。
根據官方文檔（Bootstrap 5.0） ，要定義等寬的列，只需要在每個列上使用類.col
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col"> <div class=""> CONTENT GOES HERE ... </div> </div> <div class="col"> <div class=""> IMAGE GOES HERE </div> <div class=""> <div class=""> THUBMNAIL GOES HERE </div> </div> </div> </div> </div>
解決方案4
0 2021-07-24 12:30:34
刪除使用slider-slick-img應用的container類。 不需要。 並請分享您的代碼鏈接，我們可以在其中檢查實際內容（圖像並添加到購物車框）。 否則，使用這些文本，它在這里工作正常。
解決方案5
0 2021-07-27 04:26:24
您不應該在
lg screen為兩個 div 設置12，在xl,lg上設置8,4xl,lg在md設置xl,lg6,6，在sm上設置12,12。
<div class="container"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5"> <div class="slider-slick-img container"> <div class="slider-for"> IMAGE GOES HERE </div> <div class="slider-nav mt-5"> <div class="item px-2"> THUBMNAIL GOES HERE </div> </div> </div> </div> <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5"> <div class=""> CONTENT GOES HERE ... </div> </div> </div> </div>
解決方案6
0 2021-07-30 17:40:53
我通過選擇使用網格系統的完全響應式 col 來解決您的問題，如我的代碼所示。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col"> <div class=""> CONTENT GOES HERE ... </div> </div> <div class="col"> <div class=""> IMAGE GOES HERE </div> <div class=""> <div class="px-2"> THUBMNAIL GOES HERE </div> </div> </div> </div> </div>
解決方案7
0 2021-07-31 03:15:34
您還應該包含元標記“viewport”，以便瀏覽器正確處理您的 html 代碼。
<meta name="viewport" content= "width=device-width, initial-scale=1.0", shrink-to-fit=no">
你可以試着把它放在你工作的部分。
如何在bootstrap中切換兩列的位置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.