漫随云卷云舒
2017-11-29 06:06
采纳率: 100%
浏览 1.1k

Bootstrap的col-md-*中thumbnail样式包不住图片按钮

接触时间不长,还不太懂Bootstrap框架,html也只是知道一些常用的控件和用法,请教个小问题,麻烦谁能解答一下。

页面中显示商品列表,在angular应用子组件的html中,父节点div是thumbnail样式的,里边首行想设定一个图片按钮,图片下方对应相关商品名和概要。

开始没有想作成按钮时,直接用image放了个网上的通用图片,显示没有问题,能包含在这个thumbnail的div中(即使图片大小超过父组件html布局此组件定义的样式,也会按照父组件显示),但换成input标签是一个图片按钮后,页面会显示图片指定就size而不是col-md-*的布局,导致图片溢出了thumbnail的div。
请问这个原理是什么呢?解决方法是什么呢?想到的是直接改原图片size,但实际上根据浏览器窗口大小,也是不能动态解决的,比如,F12时,左边显示列表被压缩宽度,图片还是会溢出。

看代码吧,比较清楚:

1,父组件:app.component.html
图片说明

2,子组件(商品列表):product.component.html
图片说明

执行结果:

图片说明

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 阡路陌人 2017-11-29 07:03
    已采纳

    请问你这个input是怎么布局上去的呢?如果是给它相对定位是上去的,width设为100%,那是会将父级的padding给继承下去的

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题