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

Question

我是引导程序的新手，现在创建一个包含一行和两列的网站。在我将图像添加到列之前，一切都做得很好。添加图像后，该列将中断到下一行。谁能告诉我出了什么问题？请看一下这张图片：<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;，但没有任何帮助。

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