Bootstrap 3-在同一行的输入中添加一个星号 [英] Bootstrap 3 - Add an asterisk to the input on the same row

问题描述

我尝试过:

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

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>

但是结果非常难看:(

推荐答案

演示小提琴

尝试使用:

Demo Fiddle

Try using:

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

nb.您还没有在已发布的代码中关闭一个div标签.

nb. You also hadnt closed one of your div tags in your posted code.

这篇关于Bootstrap 3-在同一行的输入中添加一个星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！