在这种情况下如何正确地将两列排成一行

Question

我正在使用 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>

这段代码的结果在这里：

如您所见，它分隔了 images 的列和 contents 的列（产品标题、产品描述等）。

然而它们都放在一个row class.

那么如何按照此处显示的预期结果将它们正确地排成一行？

Expected Result:

更新#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，并且还向两列 class 添加 col-6 而不是 col-12 es，会出现这个结果：

但是，如您所见，内容看起来更薄，与预期结果图像仍然存在差异。

那么如何解决这个问题呢？

Answer 1

在你的两列中你都添加了 class 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>

Answer 2

将带有内容的 div 放在第一位，然后将带有图像的放在后面似乎正确反映了此布局。

要定义等宽的列，只需根据 official documentation (Bootstrap 5.0)

在每个列上使用 class .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>

Answer 3

你重复了 classes 并简单地把这里的一切复杂化了，你必须定义你想要中断到整行的地方它会自动在该屏幕尺寸下中断，你不需要明确添加另一个class，添加太多 classes 会让你和任何以后必须理解代码的人感到困惑。 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>

Answer 4

删除 container class 与 slider-slick-img 一起应用。不需要。请将 link 分享到您的代码，我们可以在其中检查实际内容（图片并添加到购物车框）。否则，使用这些文本，它在这里工作正常。

Answer 5

You should not set 12 on lg screen for both div, set 8,4 on xl,lg set 6,6 on md and set 12,12 on sm.

<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>

Answer 6

我通过使用我的代码中所示的网格系统选择完全响应式 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>

Answer 7

您还应该包含元标记“viewport”，以便您的 html 代码能够被浏览器正确处理。

<meta name="viewport" content= "width=device-width, initial-scale=1.0", shrink-to-fit=no">

你可以试着把它放在你的工作部分。

在这种情况下如何正确地将两列排成一行

How to place two columns in a row properly in this situation

html

css

twitter-bootstrap

twitter-bootstrap-3

multiple-columns