jquery - 3 列字段 Bootstrap

Question

3 列字段 Bootstrap

我有这个JsFiddle ，奇怪的是在 jsFiddle 中它看起来还不错!全部在一行中，但是当我在我的站点上运行 Bootstrap 代码时，文本字段占据了剩下的宽度，将其后面的任何内容推到下一行，无论它只是一个“％”(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>

和我的样式代码..

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 25%;
    padding-right: 10px;
    text-align: right;
  }
.field input:not([type="radio"]) {
    width: 50%;
    margin: 0px;
  }

问题似乎是

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

%(例如 0 % 到 12 %)不能与机票回扣和文本字段位于同一行。 看起来文本字段占据了所有剩余的宽度，我不知道如何让它出现，全部在 1 行中，文本字段是 0 到 3 个字符，宽度不需要很大。

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

Answer 1

.form-control 显示在 Bootstrap CSS 中声明的 block。

您需要将输入的display设置为inline-block

#ticket_rebate{
    display: inline-block;
}

<强> DEMO