3 Колонка Поле Bootstrap

Question

3 Колонка поле Bootstrap

У меня есть этот JsFiddle, странно в jsFiddle его взгляд все в порядке! все в 1 строке, но когда я запускаю свой код начальной загрузки на своем сайте, текстовое поле занимало слева по ширине, толкало все, что было после него, на следующую строку, независимо от того, является ли его просто «%» (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%) не может быть таким же, как ряд билет Rebate & Текстовое поле. Кажется, что текстовое поле взяло всю оставшуюся ширину, я не уверен, как сделать так, чтобы оно отображалось, все в 1 строке, текстовое поле от 0 до 3 символов, оно не должно быть очень большим по ширине.

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

Answer 1

The .form-controlblock отображаемый который объявлен в начальной загрузке CSS.

Вам нужно установить display в inline-block

#ticket_rebate{ 
    display: inline-block; 
} 

DEMO

Answer 2

Попробуйте добавить форму-рядный класс на вход в?

<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> 

Answer 3

DEMO with bootstrap 3

HTML:

<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> 

CSS:

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

Теперь вы можете сделать его reponsive путем добавления классов Ф.О. r col-xs, col-md, col-lg