如何对齐这样的输入字段？ （关闭和共享边界）

Question

我正在设计一个结帐表单，非常喜欢 Stripe 结帐表单如何将其输入紧密组合在一起，如所见 here

我用的是bootstrap 3，到目前为止我已经标出了结构，但是我还没有能够像图片中那样整齐地对齐输入和它们的边框

我的html

 <div class="col-xs-12">
            <div class="input-grouping">
              <div class="top">
                <input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
              </div>
              <div class="bottom-left">
                <input type="text" class="form-control" name="checkoutExpiration" id="checkoutExpiration" placeholder="MM/YY">
              </div>
              <div class="bottom-right">
                <input type="text" class="form-control" id="checkoutCVC" placeholder="CVC">
              </div>
            </div>
          </div>

有什么建议吗？

Answer 1

如果我想完全复制您的示例，我会建议抑制输入字段的默认显示（通过删除边框和背景），然后将它们包装在您可以根据需要设置样式的 div 中。