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{&nbsp; width: 100%;&nbsp; height: auto;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><div class="row">&nbsp; <div class="col-sm-6">&nbsp; &nbsp; &nbsp; <img src="https://dummyimage.com/600x400/000/fff">&nbsp; </div>&nbsp; <div class="col-sm-6">&nbsp; &nbsp; col-sm-6&nbsp; </div></div>