media-right not correctly positioned

[myhandeu]

Hi, I just migrate from bootstrap 3.2.0 into bootstrap 3.3.0. I had a problem in media class. The idea to change media structure is good. But unfortunately when I use media-right with short content in media-body there is a gap on the right side of media-right.

Here's the illustration:

The button follow should not be positioned on there. I just change margin of media and padding of .media-left and .media-right.

Here's the html code:

<div class="media">
  <a class="media-left" href="#">
    <img class="img-sm img-circle" src="assets/img/u_7_sm.jpg" alt="alt here">
  </a>
  <div class="media-body">
    <div class="media-heading">
      <a href="#">Marshall Dean</a> / @fl_mdean
    </div>
    <div class="media-desc">
      Gingerbread dragée macaroon cotton candy
    </div>
    <div class="media-info">
      Join over 5y ago
    </div>
  </div>
  <div class="media-right">
    <button type="submit" class="btn btn-sm btn-simple btn-info">Follow</button>
  </div>
</div>

The question is this is bug of media? Or I forget something?

Thank you

[hnrch02]

I think this basically boils down to the problem described in #14990. Does applying width: 100%; to .media-body fix your problem?

[myhandeu]

Yes that fix my problem I tried before. But unfortunately when media placed inside wrapper that contain float left or right, it pull the wrapper to fill entire width and caused other float wrapper below the wrapper that contain media. Any solution for this case?

[myhandeu]

Hi, I just solve this problem by adding .media-inline class. The purpose of .media-inline class is to prevent media push the wrapper to fit entire float box. Here's the code:

.media-body {
  width: 100%;

  .media-inline & {
    width: auto;
  }
}

Hope this code will help someone.

Thank you

[brunsgaard]

@myhandeu helped me :)

[alosultan]

.pull-left + .media-body, .pull-right + .media-body {
    display: block;
    overflow: hidden;
    zoom: 1;
}