引导表单必填字段

Question

我有一个像这样的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>

现在名称字段是必需的,所以我想在它旁边显示一个星号.我试过这个:

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

但它显示在输入下,而不是紧挨着它.我怎样才能解决这个问题？JSFiddle:http://jsfiddle.net/Dc5yw/

Answer 1

减小输入字段的宽度form-control并添加float:left到此.

检查小提琴

CSS更改

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

.form-control{
    width:97%;
    float:left;
}