bootstrap форма Обязательное поле

у меня есть форма начальной загрузки, как это:

<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-2 text-right">
                <label class="control-label">Name</label>
            </div>
            <div class="required col-xs-10" >
                <input class="form-control" type="text" />
            </div>
        </div>
    </form>
</div>

теперь поле name требуется, поэтому я хочу отобразить звездочку рядом с ним. Я попробовал:

.required:after {
    content: " *";
}

но он отображается под входом, а не рядом с ним. Как я могу это исправить? JSFiddle: http://jsfiddle.net/Dc5yw/

6
css html twitter-bootstrap twitter-bootstrap-3

5 ответов

уменьшить ширину поля ввода form-control и добавить float:left для этого.

Регистрация скрипка

изменения CSS

.required:after {
    content: "*";
    padding-left:1%;
}

.form-control{
    width:97%;
    float:left;
}
8
.required::after {
 content: "*";
 position:absolute;
 right:0px;
 top:10px;
}

проверить это JSFiddle

Примечание: :after старый синтаксис, теперь это ::после

3

проверить эту скрипку.это решит проблему ur.

http://jsfiddle.net/Dc5yw/1/

изменить это

<div class="required col-xs-10" >
<input class="form-control1" type="text" />
</div>
2

демо

в CSS

.col-xs-10 {
    position:relative;
}
.required:after {
    content:" *";
    position: absolute;
    top: 0;
    right: 5px;
}
0

в HTML -

<div class="form-group required">
  <label class="col-md-4 control-label" for="textinput">Name</label>
    <div class="col-md-4">
      <input id="textinput" name="textinput" placeholder="Your name" class="form-control input-md" required="" type="text">
                                
    </div>
</div>
-1