水平调整Bootstrap 3媒体对象主体大小

Question

我需要均匀地调整.media-body元素的大小，这样无论文本如何换行，它们都可以长到页面的左边。

<div class="container">
<div class="media">
    <a class="media-left" href="#">
        <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <p class="text-justify deal-text" >Lorem ipsum dolor sit amet, consectetur dipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
   </div>
    <a class="media-right" href="#">
        <img class="media-object" data-src="holder.js/64x64">
    </a>
</div>
  <div class="media">
    <a class="media-left" href="#">
        <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <p class="text-justify deal-text" >Lorem ipsum</p>
   </div>
    <a class="media-right" href="#">
        <img class="media-object" data-src="holder.js/64x64">
    </a>
</div>
  <div class="media">
    <a class="media-left" href="#">
        <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <p class="text-justify deal-text" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
   </div>
    <a class="media-right" href="#">
        <img class="media-object" data-src="holder.js/64x64">
    </a>
</div>
</div>

这是snippet

Answer 1

这似乎起作用了..。

<style>
  .media-body {
    width: 100% ;
  }
</style>