在我的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
答案 0 :(得分：1)
图像的自然大小比包含它的引导类大。因此，看似文字渗入图像的内容实际上是超出其父级边界的图像。
要强制图片服从其父级的大小，请将其添加到CSS：
img {
width: 100%;
height: auto;
}
答案 1 :(得分：-1)
请在img-reponsive代码中提供img课程，并将col-md和col-sm课程。现在img和它的描述并排到768屏幕分辨率之后，它是全宽的。
body {
margin: 10px;
}
.main {
border: 1px solid black;
background-color: lightgrey;
margin: 10px 10px !important;
}
.text {
padding: 5px;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
<div>
<div>
<div class="row main">
<h1>Boyer - Botsford</h1>
<h3 class="col-lg-6">clicks-and-mortar scale infomediaries</h3>
<h3 class="col-lg-6 text-right">Since Sat Nov 25 2017 16:55:29 GMT+1100 (AEDT)</h3>
</div>
<div class="row">
<div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/buryaknick/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>DylanMacdonaldAssumenda doloribus ut dolore eaque autem. Sit rem similique cum modi qui. Qui m</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/abdullindenis/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>IsabelRolfsonDicta explicabo pariatur et placeat enim. Dignissimos similique in nesciunt aut </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/andytlaw/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AnthonyCartwrightSint cum corrupti similique laudantium nesciunt aliquam sint aperiam. Id consequ</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/longlivemyword/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>LukeWestConsequatur excepturi tempore iste ipsam et architecto animi explicabo. Magnam s</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/dnirmal/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>MaxDietrichQuo dolorum et est facere nihil similique repudiandae. Recusandae ratione enim d</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marosholly/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AlexanderErnserSit quo dignissimos molestiae quasi ut dolor. Et et quaerat assumenda laborum ea</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/areus/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AlyssaDanielDolor est id. Officiis aut odio molestiae ut quaerat quae vero ipsa. Voluptatem </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/alagoon/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>KaiHayesNobis ea ut distinctio nam et suscipit velit. Necessitatibus exercitationem blan</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bertboerland/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>IsabelleClarkeVel velit repellat dicta. Maxime occaecati sed dolorum et modi. Voluptates rerum</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/drewbyreese/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>HaydenWilliamsAt vel voluptatibus rerum ex aut porro. Quis dolorem qui dolorum eveniet a facer</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/markwienands/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AbigailBorerDoloribus illum nam modi consequuntur unde et et a rerum. Laboriosam quis quod. </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/okandungel/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>HamishMclaughlinSapiente aliquam consequatur doloribus occaecati dolorem perferendis qui aliquid</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>