Html 中央和底部多个div的复杂排列

我正在更新一个解决化学问题的旧网站

<> P>旧版本的网站将生成一个以页面中间为中心的表。看起来像这样

响应式布局是这样生成的，元素都放错了位置，看起来与原始布局完全不同

我试图用下面的css代码驯服流浪的div，但收效甚微

.compound
{
    vertical-align: bottom;
    text-align:center;
}

.col-centered
{
    vertical-align: bottom;
    float: none;
    margin: 0 auto;
    overflow: hidden
}

---

关于如何使它看起来更漂亮有什么建议吗？

这是因为您正在将所有列的大小调整为

col-sm-1

而是将

col-sm-3

添加到所有具有输入框的div中

参见小提琴：

---

您需要从

.col centered

中删除

float:none

，并为包含元素的div设置一个更大的单元格。例如：

对于html，请尝试使用它

我从bootstrap中添加了一些其他类，因此看起来更好。 我还将列sm从1改为3。

---

您应该在bootstrap中阅读有关网格的内容。

谢谢，它的工作原理几乎符合我的要求。不幸的是，我不能使用col-sm-3，因为我可以有相当大的公式，并且元素的总数可能超过12的限制。您能告诉我如果在窄屏幕上显示，如何允许列垂直排列吗？@RWS要使移动设备垂直排列，您可能需要添加断点，例如，将类更改为类似以下内容的内容

class=“col-md-3 col-xs-12 col centered”

@RWS，以使其适合更多内容，我需要一个例子来更好地了解你在做什么。谢谢你的关注。我想找到一种方法，在合适的情况下将元素正确地排列成一行（只有在屏幕宽度足够大的情况下，上面的解决方案才能正常工作）。公式需要如下更改其位置：compound1+compound2=compound3更大的公式：

.compound {
  text-align: center;
}
[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

    .container {
        margin: 2rem auto;
    }
    h2 {
        margin-top: 1rem;
        text-align: center;
    }