我是引導(dǎo)程序的新手，現(xiàn)在創(chuàng)建一個(gè)包含一行和兩列的網(wǎng)站。在我將圖像添加到列之前，一切都做得很好。添加圖像后，該列將中斷到下一行。誰能告訴我出了什么問題？請(qǐng)看一下這張圖片：<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;，但沒有任何幫助。
1 回答
萬千封印
TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
這是代碼。我也會(huì)分享你的鏈接。請(qǐng)檢查。如果有任何變化，請(qǐng)告訴我。只需刪除offset-sm-6。您還需要為 img 標(biāo)簽添加 css。您只需將img 標(biāo)簽賦予 width:100%; 和高度：自動(dòng)。你的問題會(huì)解決的。
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>
- 1 回答
- 0 關(guān)注
- 182 瀏覽
添加回答
舉報(bào)
0/150
提交
取消