bootstrap - 使列高度为宽度

Question

我有一个输入框，占用6个网格单位。在高度上，它占用21.981px，如图1所示

我希望能够像图2中的方格一样。如何实现这个

 <form class ="form-inline">
                <div class="row">
                 <div class="form-group col-xs-6">
                        <input id="p1a" type='text'
                               style='border: solid black 1px;'
                               onfocus='this.blur()'
                                readonly='true'
                                size='1'
                               value='&#x2753;' onclick='tristate_Marks(this)' />
                    </div></div>

Answer 1

您可以使用CSS：

body {
  width: 200px;
  height: 200px;
  background-color: red;
}
.square {
  width: 100%;
  padding: calc(50% - 21px) 0;
  line-height: 21px;
}

<input type="text" class="square" value="test" />

Answer 2

虽然Thomas的答案是正确的并且有效，但我改变了使用js的方法

BooleanProperty

这不会调整大小调整框的大小，但我不需要此功能