Html 引导程序表单必填字段

bootstrap form required field

提问by lunr

I have a bootstrap form like this:

我有一个像这样的引导程序：

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

Now the name field is required so i want to display an asterisk right next to it. I tried this:

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

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

But it is displayed under the input, not right next to it. How can i fix this? JSFiddle: http://jsfiddle.net/Dc5yw/

但它显示在输入下方，而不是旁边。我怎样才能解决这个问题？JSFiddle：http: //jsfiddle.net/Dc5yw/

回答by James

Reduce the width of the input fields form-controland add float:leftto this.

减少输入字段的宽度form-control并添加float:left到其中。

Check the fiddle

检查小提琴

CSS changes

CSS 更改

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

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

回答by Abhijit Mali

check this fiddle.this will solve ur problem.

检查这个小提琴。这将解决你的问题。

http://jsfiddle.net/Dc5yw/1/

http://jsfiddle.net/Dc5yw/1/

change this

改变这个

<div class="required col-xs-10" >
<input class="form-control1" type="text" />
</div>

回答by T J

.required::after {
 content: "*";
 position:absolute;
 right:0px;
 top:10px;
}

check this JSFiddle

检查这个JSFiddle

side note: :afteris old syntax, now it is ::after

旁注：:after是旧语法，现在是 ::after

回答by Pravin Waychal

DEMO

演示

CSS

CSS

.col-xs-10 {
    position:relative;
}
.required:after {
    content:" *";
    position: absolute;
    top: 0;
    right: 5px;
}

回答by Alex Ferrer

In your HTML

在你的 HTML

<div class="form-group required">
  <label class="col-md-4 control-label" for="textinput">Name<span style="color:red;">*</span></label>
    <div class="col-md-4">
      <input id="textinput" name="textinput" placeholder="Your name" class="form-control input-md" required="" type="text">
                                
    </div>
</div>