перемещение бутстрапа глификон внутри строки div

Question

Меня попросили сделать некоторое обслуживание на сайте, в частности, добавить '?' значок рядом с текстовым полем, поэтому он может давать подсказки пользователю на форматировании текста внутри коробки и т.д. и т.п.:

<div class="input-group"> 
    <!-- ngIf: icon != '' && !isFaIcon --><span ng-if="icon != '' &amp;&amp; !isFaIcon" class="input-group-addon glyphicon glyphicon-tag icon-inline btn-item"> 

    </span><!-- end ngIf: icon != '' && !isFaIcon --> 

    <!-- ngIf: icon != '' && isFaIcon --> 

    <input type="text" class="form-control btn-item form-tab-input ng-pristine ng-untouched ng-valid" placeholder="Target URL" ng-model="model"> 

    <span class="input-group-addon glyphicon glyphicon-asterisk input-state"></span> 

    <span class="help input-group-addon glyphicon glyphicon-question-sign input-state"></span> 
</div> 

Окончательного пролет линии я добавил, и в целом это выглядит следующим образом:

Мой вопрос: как я могу переместить значок знака вопроса 20 пикселей или около того вправо, так что между значком астерики и вопросительным знаком есть пробел? Я попытался возиться с «padding-left» в .help css, но это не помогает.

Answer 1

Значок значка вопроса имеет только этот «квадратный» дизайн, потому что он имеет padding: 6px 12px;. Поэтому, если вы уменьшите padding-left, вы можете увеличить padding-right на ту же сумму и посмотреть, как он перемещается влево.

В настоящее время: padding-left/right: 12px; Если мы теперь уменьшить padding-left по 6px и добавить его в padding-right, он будет выглядеть более левый край.

.help { 
    padding-left: 6px; 
    padding-right: 18px; 
} 

JSFiddle: http://jsfiddle.net/w4okgot5/1/

Вы также могли позволить ему так же, как и просто увеличить padding-right, так что окно будет выглядеть немного больше, но это больше, чем левая выровнен вправо.

.help { 
    padding-left: 12px; 
    padding-right: 24px; 
} 

JSFiddle: http://jsfiddle.net/w4okgot5/2/

---

EDIT

Поскольку вопрос изменилось, я оставляю мой выбор здесь реальный ответ хотел.

Попробуйте добавить еще span -элементные там и просто настроить padding-left как следующее:

HTML

<span class="input-group-addon glyphicon glyphicon-asterisk input-state"></span> 

<span class="gap input-group-addon glyphicon input-state"></span> 

<span class="help input-group-addon glyphicon glyphicon-question-sign input-state"></span> 

CSS

.gap { 
    padding-left: 25px; 
} 

JSFiddle: http://jsfiddle.net/w4okgot5/3/

25px - всего лишь пример. Отрегулируйте его в пространстве, которое вы хотите иметь между значками.