Bootstrap 4无法将列放在同一行中答案

【问题标题】：Not able to put columns within the same row by Bootstrap 4Bootstrap 4无法将列放在同一行中
【发布时间】：2020-04-08 13:25:45
【问题描述】：

我是 bootstrap 的新手，现在正在创建一个包含一行和两列的网站。

在我将图像添加到列之前，一切都做得很好。添加图像后，该列将中断到下一行。谁能告诉我出了什么问题？

请看这张图片：

<div class="row">
<div class="product-info col-sm-6" style="margin-left:-15px;">
    <?= $this->Html->image($product->name.'.jpg',['class'=>'img-responsive') ?>
</div>
<div class="product-info col-sm-6 offset-sm-6">
    <span><?= $product->category->category ?></span><br>
    <span><?= $product->name ?></span><br>
    <span>￥<?= $product->price ?></span><br>
</div>

我刚刚尝试使用margin-left:-15px;，但没有任何帮助。

【问题讨论】：

您是否在 firebug 中检查并发现问题？
我进行了更改。请检查。如果有任何更改，请告诉我。

标签： php html bootstrap-4

【解决方案1】：

这里是代码。我也会分享你的链接。请检查。如果有任何变化，请告诉我。只需删除 offset-sm-6。您还需要为 img 标签添加 css。您只需将 img 标签赋予 width:100%;和高度：自动。你的问题会解决的。

https://jsfiddle.net/ah7q9fmc/

img{
  width: 100%;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6">
      <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col-sm-6">
    col-sm-6
  </div>
</div>

【讨论】：

感谢您的回复！它完美地解决了我的问题。但是我可以问为什么偏移不适用于img标签吗？
@fcy_brian 请接受答案以关闭此问题
@fcy_brian 实际上不需要偏移量。偏移量用于在响应式网格中间隔元素
@fcy_brian 如果我是对的，请给我反馈。