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

我是引导程序的新手,现在创建一个包含一行和两列的网站。

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

请看一下这张图片:

http://img4.mukewang.com/62ac324f0001bae205320538.jpg

<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;,但没有任何帮助。


翻翻过去那场雪
浏览 192回答 1
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>
打开App,查看更多内容
随时随地看视频慕课网APP