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

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中，你可以选择样式。