Jquery 3列字段引导

3列字段引导

我有这个，奇怪的是它看起来很好！全部在一行中，但当我在我的站点上使用引导代码运行时，textfield占据了剩余的宽度，将其后面的内容推到下一行，不管它是一个“%”（1个字母）还是一个字符串

<div class="field">
<div class="form-group">
<label for="ticket_rebate">Ticket Rebate</label>
<input type="text" class="form-control" id="ticket_rebate" placeholder="">% (e.g. 0 % to 12 %)
</div></div>

问题是看起来

Ticket Rebate [   Text Field    ]
   % (e.g. 0 % to 12 %)

百分比（例如0%到12%）不能与票券折扣和文本字段的行相同。 似乎文本字段占据了所有剩余的宽度，我不确定如何使它出现，全部在一行中，文本字段是0到3个字符，它不需要非常大的宽度

Ticket Rebate [   Text Field    ] % (e.g. 0 % to 12 %)

---

.form控件

显示在引导CSS中声明的

块

您需要将输入的

显示设置为
内联块

#ticket_rebate{
    display: inline-block;
}

是否尝试添加表单内联类

<form class="form-inline">
<div class="field">
  <div class="form-group">
    <label for="ticket_rebate">Ticket Rebate</label>
    <input type="text" class="form-control" id="ticket_rebate" placeholder="">% (e.g. 0 % to 12 %)
  </div>
</div>
</form>


退票
%（例如0%至12%）

HTML:

现在，您可以通过为
col xs
、
col md
、
col lg

<form class="form-inline">
<div class="field">
  <div class="form-group">
    <label for="ticket_rebate">Ticket Rebate</label>
    <input type="text" class="form-control" id="ticket_rebate" placeholder="">% (e.g. 0 % to 12 %)
  </div>
</div>
</form>

<div class="field">
    <div class="form-group row text-center"><!--Using text-center on parent is like margin:0 auto-->
        <label class=col-lg-4 for="ticket_rebate">Ticket Rebate</label>
        <input class=col-lg-6 type="text" class="form-control" id="ticket_rebate" placeholder=""/>
        <span  class=col-lg-2>% (e.g. 0 % to 12 %)</span>
    </div>
</div>

.field, .actions {
    /*extra css goes here*/
  }
  .field label {
    /*extra css goes here*/
  }
.field input:not([type="radio"]) {
   /*extra css goes here*/
  }