Bootstrap混淆的列大小调整示例

Question

所以我试图弄清楚为什么输入的大小如此之小，例如col-xs-<number>。根据我对Bootstrap的理解，这并不意味着当屏幕大小符合标准时它会相应地进行调整，任何更大的内容都会自动占据整个12列。这是代码：

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

以下是文档中的示例：https://bootstrapdocs.com/v3.3.5/docs/css/?#column-sizing