javascript - 如何修复 Bootstrap 不破坏网格？

Question

我有什么:

我正在使用 Django 在 View 上填充我的 Makes。

这是我的模板:

    <div class="container">
    <div class="row">
    <div class="btn-group" id="makesTable">
    {%  if makes %}
    {% for make in makes %}
    <button  type="button" name="button" class="btn btn-default" id="{{ make.id }}">
        <br />
        <img class="center-block" src="[REDACTED]"  />
        <br />
        <p>{{ make.name }}</p>
    </button>
    {% endfor %}
{% endif %}
</div>
</div>
</div>

这是 HTML5 输出:

<div class="container">
 <div class="row">
  <div class="btn-group" id="makesTable">
    <button  type="button" name="button" class="btn btn-default" id="1">
        <br />
        <img class="center-block" src="/static/IQC/assets/img/gallery/brands/128/Acura.png"  />
        <br />
        <p>Acura</p>
    </button>

    <button  type="button" name="button" class="btn btn-default" id="2">
        <br />
        <img class="center-block" src="/static/IQC/assets/img/gallery/brands/128/Alfa%20Romero.png"  />
        <br />
        <p>Alfa Romero</p>
    </button>

    <button  type="button" name="button" class="btn btn-default" id="3">
        <br />
        <img class="center-block" src="/static/IQC/assets/img/gallery/brands/128/Audi.png"  />
        <br />
        <p>Audi</p>
    </button>
</div>
 </div>
  </div>

我目前遇到响应式设计方面的问题。我希望将按钮排列在 5x7 网格中，但是，有时，我会遇到以下问题:

This is how I want it to look

This is how it breaks

Answer 1

如果您使用 box-sizing: border-box;，那应该可以解决您的问题。