html - Bootstrap 表格必填字段

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。

检查 fiddle

CSS 更改

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

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