Bootstrap复选框在不同的浏览器上表现得很奇怪

Question

我正在使用纯HTML，CSS，PHP和Bootstrap在一个简单的网站上工作。我想使用Bootstrap中的复选框，但它们似乎在不同的浏览器中表现得很奇怪......例如在Chrome中，它们非常大且不合适。

在Safari上，它们显得正常，但点击后，它们会跳跃运动..

我希望它们看起来正常，并且都在同一条线上。

这是代码：

<div class="row">
        <div class="row">
          <div class="col-md-12">
            <label>Products :</label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <ul class="list-unstyled list-inline checkbox-list">
              <li><label class="checkbox-inline">Food </label>
                  <input type="checkbox" id="inlineCheckbox1" name="products[]" value="food">
              </li>
              <li><label class="checkbox-inline">Books</label><br>
                  <input type="checkbox" id="inlineCheckbox1" name="products[]" value="books">
              </li>
              <li><label class="checkbox-inline">Phones</label><br>
                  <input type="checkbox" id="inlineCheckbox1" name="products[]" value="phones">
              </li>
            </ul>
          </div>
        </div>
      </div>

有什么想法吗？