在同一行，长度和空格上创建一个带有表单输入的模态？ （提供图片示例）

Question

已经尝试了几个小时的喵喵，（真的需要在html上变得更好）但是我想要的只是一个模态上的3个输入，form-control会很好因为我喜欢这个外观但不是＆＃39 ; t必须在这一点上，在一个自助模式上付款。

以下是我想要的内容

http://api.jquery.com/jQuery.ajax/

我知道，你认为我能够得到这个

<div class="modal-body text-center form-horizontal" id="modal_body">
                    <form action="/made_payment" method="POST" id="payment-form">
                    <span class="payment-errors"></span>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label>
                                <input class="form-control" type="text" size="20" data-stripe="number" placeholder="Card Number">
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-xs-12" style="display: inline-flex;">
                            <data class="col-xs-6">
                                <input class="form-control" type="text" size="4" data-stripe="exp_month" placeholder="Exp (MM/YY)">
                            </data>
                            <data class="col-xs-6">
                                <input class="form-control" type="text" size="4" data-stripe="cvc" placeholder="CVC">
                            </data>
                        </div>
                    </div>


                </div>

Answer 1

首先你的html结构需要重新组织，除非它是有意的。基于此post - 创建一个无装订线类并应用于要删除列之间间距（装订线）的行 - （我已将div替换为数据标签以便于阅读 em>）：

＆＃13;

＆＃13;

.no-gutter {
    margin-left: 0;
    margin-right: 0;    
}

.no-gutter > [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="modal-body text-center form-horizontal" id="modal_body">
  <form action="/made_payment" method="POST" id="payment-form">
    <span class="payment-errors"></span>

    <div class="row">
      <div class="form-group no-gutter col-xs-6">
        <div class="col-xs-12">
          <input class="form-control" type="text" data-stripe="number" placeholder="Card Number">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" size="4" data-stripe="exp_month" placeholder="Exp (MM/YY)">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" size="4" data-stripe="cvc" placeholder="CVC">
        </div>
      </div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

至于你的css和bootstrap的其他造型 check this out bootstrap input groups - 祝你好运