Firefox bug: Figures break grid
Created by: alienlebarge
Description
When using Figures in a grid, it doesn't fit the width of the container.
Here's a Pen to reproduce the bug
Environment
- Browser version: All firefox version (.zip of screenshots)
- Bootstrap version: 4.0.0-alpha.6
Cause
The problem is caused by the following code:
.figure {
// Ensures the caption's text aligns with the image.
display: inline-block;
}
Additional Info
<div class="row">
<article class="col-md-6">
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">...</figcaption>
</figure>
<p>...</p>
</article><!-- /.col-md-6 -->
<article class="col-md-6">
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">...</figcaption>
</figure>
<p>...</p>
</article><!-- /.col-md-6 -->
</div><!-- /.row -->