Question

我有什么：

我正在使用Django在视图上填充我的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;，则可以解决您的问题。

如何通过打破网格来修复Bootstrap？

1 个答案: