Bootstrap 3 - Ajouter un astérisque à l'entrée sur la même ligne

J'ai essayé avec:

<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>

et

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

mais le résultat est toujours

Bootstrap 3 - Ajouter un astérisque à l'entrée sur la même ligne

avec comme:

<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>

mais le résultat est très moche 🙁

Où dans l'entrée voulez-vous - voulez-vous dire juste après le titre comme 'Titre'?

OriginalL'auteur Whisher | 2014-04-28

  1. 8

    Démo De Violon

    Essayez d'utiliser:

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

    nb. Vous aussi n'avait pas fait de la fermeture d'une de vos balises div dans votre posté code.

    J'ai enlevé margin-right. Sinon, l'entrée de champ est un peu serrée. 🙂 Merci!

    OriginalL'auteur SW4

  2. 1

    Créer une classe CSS

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

    L'utiliser juste l'étiquette qui est nécessaire

    <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>

    OriginalL'auteur Md. Nazrul Islam