css - 如何防止文本移到列外？

Question

在我的 reactjs 组件中，我在 render() 中返回这个:

<div className='col-lg-4'>
       <div className="col-lg-3">
            <img src={this.props.details.avatar} alt=""/>
       </div>
       <div className="col-lg-9 text">
       <div>
            {this.props.details.firstName}
            {this.props.details.lastName}
            {this.props.details.bio.slice(0,80)}
       </div>
    </div>
</div>

目前包含文字的this.props.details.bio溢出到图片中。哪个 css 规则可以解决这个问题？目前我有:

.text{
  padding:5px;
}

这是一个jsFiddle

Answer 1

图像的自然大小大于包含它的 Bootstrap 类。因此，看起来像是渗入图像的文本实际上是图像超出了其父级的边界。

要强制图像服从其父级的大小，请将此添加到您的 CSS:

img {
  width: 100%;
  height: auto;
}