Bootstrapにて、div要素のheight設定

こんばんは。

現在、ruby on railsでwebサイトを製作しており、cssのフレームワークとしてBootstrapを使用しています。
質問は、グリッドシステム使用時のCSS設定についてです。

例えば、

html
1<div id="example" class="col-lg-8 col-xs-12">
2</div>
3コード

というようなdiv要素があったとき、デバイスによって横幅は変化すると思いますが、このdiv要素の縦幅を常に横幅と同じ長さにするには（つまり、div#exampleを正方形に保つには）css(もしくはhtml)をどのように設定すればよろしいでしょうか？

ご回答よろしくお願いします。

#追記 bootstrapのバージョンは3.3.6です。よろしくお願いします。

asahina_dev

2016/08/06 00:22

Bootstrap はバージョンによって大きく違います。　使っているライブラリのバージョンを書きましょう

行動規範の内容に同意します

回答2件

bootstrapが事前に用意している機能（class）では無理ですね。
自分でCSSを書くなら出来なくはないですが、全てのケースで適用可能とは限りません。
正方形にしたいボックスに中身が無い（背景のみ）または、確実にボックス内に収まる分量のコンテンツしかないのであれば以下の方法で実現可能です。

CSS
1/*正方形にしたいボックス枠*/
2#example{
3  position:relative;
4}
5/*擬似要素のpaddingでボックスのアスペクト比を決定＝*/
6#example:before {
7  content: "";
8  display: block;
9  padding-top: 100%; /*1:1*/
10}
11/*ボックスの中身（※余白の上に絶対配置する必要あり）*/
12#example .content {
13  position: absolute;
14  …以下適宜指定…
15}