Question

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

旧版本的网站会生成一个以页面中间为中心的表格。它看起来像http://pastebin.com/VTe2Eqdn

生成响应式布局就像这样http://pastebin.com/pyegh4C3这些元素都放错了位置，它看起来与原始内容完全不同

我试图用下面的css代码来驯服迷路div而效果不大。

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

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

有关如何让它看起来更漂亮的任何建议吗？

Answer 1

这是因为您要将所有列的大小调整为col-sm-1

而是将col-sm-3添加到包含输入框的所有div。

请参阅小提琴：https://jsfiddle.net/c259LrpL/47/

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

Answer 2

您需要从float:none中移除.col-centered，并为包含元素的div设置更大的单元格。例如：

https://jsfiddle.net/egbfse7w/

Answer 3

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

并为html http://pastebin.com/KT5EvGB7试一试。 ;）

我在bootstrap中添加了一些其他类，所以它看起来更好。我也将col-sm从1改为3。你应该阅读bootstrap中的网格。

多个div到中心和底部的复杂排列

3 个答案: