Question

我正在制作足球投注应用。

我正在使用React和bootstrap，现在我陷入了一个看似简单的问题。

我想为投注做出输入（在足球比赛中，比赛总是低于3位数）。如何在bootstrap中输入固定大小为2个字符的输入？

例如，我的屏幕将有主队和客队，以及2个输入，用户可能会下注：

巴西[] x []德国。

这些输入需要具有固定大小2.

由于

Answer 1

如果要确保输入最多只接受2个字符，请使用maxlength属性。

 <input type="text" maxlength="2" />

如果你在谈论造型（你提到一个小输入罪，你提到了靴子）那么这是一个完全不同的故事。

您可以执行以下操作：

<form class="form-inline">
 <div class="form-group">
 <label for="brazil">BRAZIL</label>
 <input type="text" id="brazil" class="form-control form-control-sm small-input" />
X
 <input type="text" id="germany" class="form-control form-control-sm small-input" />
 <label for="germany">GERMANY</label>
</div> 
</form>

尺寸符合您的需求，如：

.small-input {
 width: 5px !important;
}

Fiddle

Answer 2

使用HTML中的max length属性

<form action="/action_page.php"> Username: <input type="text" name="usrname" maxlength="10"><br> <input type="submit" value="Submit"> </form>

如何在bootstrap中创建一个只有1个caracther宽度的输入？

2 个答案: