【发布时间】：2021-09-27 15:40:10
【问题描述】：
我正在使用 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
如果我从 images 列和内容列的 <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，并将 col-6 而不是 col-12 添加到两个列类中，则会出现以下结果：
但是，如您所见，内容看起来更薄，与预期结果图像仍然存在差异。
那么如何解决这个问题呢？
【问题讨论】：
-
尝试 col-6 而不是 col-12
-
@webber 我试过了，但仍然显示与以前相同的结果。并且
col-6还折叠了较小设备上的响应式设计。 -
col-lg-12 看起来不正确。尝试简化您的类名并仅从 1 个视口大小开始。然后从那里开始工作。
-
看起来像它的工作。您正在测试哪种设备尺寸。我认为您正在测试 lg 或 md 设备。您为这些添加了 12 列。它将延伸到下一行。尝试在 xl 设备上进行测试，或者您可以尝试 col-lg-8/col-md-8 和 col-lg-4/col-md-4
-
尝试以 Codepen 或其他方式提交您的代码，并按照您编写的方式完成 CSS 类和图像，以便其他人更轻松地进行故障排除
标签： html css twitter-bootstrap twitter-bootstrap-3 multiple-columns