Bootstrap 3 - 在同一行的输入中添加星号

Question

我试过了：

<form name="form" class="form-horizontal form-article" role="form" data-ng-submit="save()">
        <div class="col-md-12">
            <div class="form-group">
                <div>
                    <input type="text" class="form-control" placeholder="Title" required="required" data-ng-model="article.title">
                </div>
                <span>*</span>
            </div>
</form>

和

.form-article .form-group div:after {
    color: red;
    content: '*';
}

但结果总是

with like：

<form name="form" class="form-horizontal form-article" role="form" data-ng-submit="save()">
        <div class="col-md-12">
            <div class="form-group">
                <div class="col-md-10">
                    <input type="text" class="form-control" placeholder="Title" required="required" data-ng-model="article.title">
                </div>
                <span class="col-md-2">*</span>
            </div>
</form>

但结果非常难看:(

Answer 1

Demo Fiddle

尝试使用：

.form-group div{
    position:relative;
    margin-right:15px;
}
.form-group div:after{
    position:absolute;
    content:'*';
    color:red;
    right:-10px;
    top:0;
}

NB。您还没有在发布的代码中关闭其中一个div标签。

Answer 2

创建一个CSS类

.required-field:after {
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 3px;
    top: 10px;
}

仅使用所需的标签

<div class="form-group">
  <label for="EmployeeName" class="control-label required-field col-sm-2">Employee Name</label>
  <div class="col-sm-4">
    @Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control", ng_model = "Employee.EmployeeName", alpha_numeric = "", required = "true" })
  </div>
  <label for="" class="control-label required-field col-sm-2">Birth Date</label>
  <div class="col-sm-4">
     @Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control", ng_model = "Employee.BirthDate", required = "true" })
  </div>