Javascript 如何修复因断开网格而导致的引导？

我所拥有的：

我正在使用Django在视图上填充make

这是我的模板：

    <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>

{%if使%}
{make in make%%中的make%




{{make.name}

{%endfor%}
{%endif%}

以下是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网格中，但有时会出现以下问题：

---

如果使用

框大小：边框框，这应该可以解决您的问题。
这是由于使用了浮动和不同的高度。。。可以使用css flexbox代替。您可以删除
{%if makes%}
。如果
makes
为空，for循环将自动退出。@charlietfl我是引导程序的不速之客，您可以详细说明或添加新行吗？仅使用html创建一个新行。我将在我的模板中将其添加到何处？您应该有一个自定义样式表，如果你是，那么你应该把它放在按钮样式下。我使用引导作为我的样式表，我认为修改它不是最好的主意（因为我也使用CDN来优化我的速度）。我尝试将style=“box size:border box；”添加到我模板中的按钮作为测试，但这不起作用。您仍然可以使用自定义样式表和CDN。这将有助于处理引导中您不喜欢的事情。你可以这样说：对CSS相当不熟悉，所以请原谅我的无知。好的，我有'bootstrap.css'和'miquel.css'，我想继承bootstrap为我的按钮设计的所有样式，但是我希望miquel.css有额外的参数框大小来修复我的css。这对你有意义吗？