Bootstrapでレスポンシブな正方形をつくりたい

#マンダラートなるものを、Webアプリとして
マンダラートとは ← wikipediaへ飛びます

マンダラートをつくりたいと思い、現在HTML/CSS&Bootstrapコーディング中です。
Bootstrap利用して途中までできたものの、textboxを正方形にするのがうまくいきません。

現状イメージ

この中の、テキストボックスを、レスポンシブな正方形にしたいです。

現状のコードは、以下の通りです。

html
1
2{% extends 'base.html' %}
3{% load static %}
4
5
6{% block content %}
7
8<div class="contentHeader text-center">
9  <h1>Mandalart</h1>
10</div>
11
12
13<div class="row">
14      <!--Ideas-->
15      <div class="col-4">
16       <input type="text" class="form-control text-center">
17      </div>
18
19      <div class="col-4">
20       <input type="text" class="form-control text-center">
21      </div>
22
23      <div class="col-4">
24       <input type="text" class="form-control text-center">
25      </div>
26
27
28
29      <div class="col-4">
30       <input type="text" class="form-control text-center">
31      </div>
32
33      <!--title-->
34      <div class="col-4">
35           <input type="text" class="form-control text-center text-success border-success" >
36      </div>
37
38      <!--Ideas-->
39      <div class="col-4">
40       <input type="text" class="form-control text-center">
41      </div>
42
43
44
45      <div class="col-4">
46       <input type="text" class="form-control text-center">
47      </div>
48
49      <div class="col-4">
50       <input type="text" class="form-control text-center">
51      </div>
52
53      <div class="col-4">
54       <input type="text" class="form-control text-center">
55      </div>
56</div>
57
58
59
60{% endblock %}

css
1.contentHeader{
2    border-bottom:solid thin #004898;
3}
4

追加で、
html <div class="col-4 mandalartRow>"
css .mandalartRow{height:100%}
などと、悪あがきで書いてみましたが、上手くいきません。

ぐぐっても、画像などの表示を正方形にするならまだしも、
テキストボックスを正方形にするというのはみあたりませんで。

すみませんが、どなたか教えてください。

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

回答2件

ベストアンサー

下記でどうでしょう？
セレクタは良いように変えてください。

css
1.col-4 {
2	position: relative;
3}
4.col-4:before {
5	content: '';
6	display: block;
7	width: 100%;
8	padding-top: 100%;
9}
10.col-4 input {
11	width: 100%;
12	height: 100%;
13	position: absolute;
14	top: 0;
15	left: 0;
16}

コードの説明

.col-4:beforeでは、正方形のエリアを作成しています。
height: 100%は、position指定以外では、うまく効かないので、padding-top: 100%;で高さを設定します。
すると、どんな幅になっても正方形になります。
そのエリアに対してinputをぴったり配置させるため、.col-4を親としてposition指定をしています。

投稿2019/01/20 01:08

編集2019/01/20 03:41

kszk311

総合スコア3404

ryujno

2019/01/20 02:04

ありがとうございました！　無事にできました！浅学で申し訳ないのですが、3つに分けるのはなぜなのでしょうか...？一部分ずつ消したり、中身書き換えたりみて試したことで、一発で上手くいかないことはわかったのですが、　.col-4のみ / :before / input 3つの役割が、それぞれどのように分かれているのかについては理解できておらず。