センターとボトムへの複数のdivの複雑な配置

化学の問題を解決する古いウェブサイトを更新しています。センターとボトムへの複数のdivの複雑な配置

古いバージョンのWebサイトでは、ページの中央に中央揃えのテーブルが生成されます。これは、要素がすべての見当違いであり、応答性のレイアウトはすべて、このhttp://pastebin.com/pyegh4C3のように生成され、このhttp://pastebin.com/VTe2Eqdn

のように見えた私は少しで以下のCSSコードと浮遊div要素を飼いならすことを試みてきました

オリジナルのもののようなそのルックスは何もありません効果。

どのように見えるようにするための提案がありますか？

2016-05-11 RWS

あなたはcol-sm-1

にすべての列のサイズを設定しているので、それは代わりに、入力ボックスを持つすべてのdivのにcol-sm-3を追加することです。 https://jsfiddle.net/c259LrpL/47/

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

2016-05-11 21:31:54

ありがとうございます、その作品は私が望むほどです。残念ながら、私はかなり大きな公式を持つことができるので、col-sm-3を使用することはできません.狭い画面に表示されると列を垂直に並べる方法を教えてください。 – RWS

@RWSモバイル向けに垂直方向に行うには、ブレークポイントを追加したいと思います。たとえば、クラスを次のように変更します：class = "col-md-3 col-xs-12 col-centered" ' –

@RWSそれはより多くのものに合うようにするために、私はあなたが取っているもののよりよい考えを得るための例を持つ必要があります。 –

あなたは.col-centeredからfloat:noneを削除し、要素を持つdivのためのより大きなセルを設定する必要があります。

はフィドルを参照してください。例：

2016-05-11 21:34:56

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

とhtml http://pastebin.com/KT5EvGB7のためには、それを試してみてください。 ;）

ブートストラップからいくつかのクラスを追加しました。また、col-smを1から3に変更しました。ブートストラップのグリッドについてお読みください。

2016-05-11 21:45:24 Harry

答えて