Бутстрапы, которые не отображаются правильно в Firefox

Question

Моя сетка Bootstrap отлично работает в Safari и Chrome, но не в Mozilla Firefox. Он отлично работает, когда я немного минимизирую его, но не на размер экрана заливки.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"> 
      1 
      </div> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"> 
      2 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> 
      3 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12"> 
      a 
      </div> 
      <div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12"> 
      b 
      </div> 
      <div class="single-offer col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12"> 
      c 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

У вас есть идеи, почему это происходит?

Answer 1

Оказалось, что речь шла не о этой части. Дело в том, что в приведенной выше строке было 1px свободного места, поэтому Firefox пытался замять эту часть в этой строке, которая испортила все это.

Решение:

.container-fluid>.row {clear:both} 

К сожалению все для вводящей в заблуждение.

Answer 2

Ваша разметка неверна. Ваше открытие должно быть:

<div class="container-fluid">