Question

我有这样的引导形式：

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

Answer 2

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

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

更改此

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

Answer 3

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

检查此JSFiddle

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

Answer 4

<强> DEMO

<强> CSS

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

Answer 5

在您的HTML中

<div class="form-group required">
  <label class="col-md-4 control-label" for="textinput">Name</label>
    <div class="col-md-4">
      <input id="textinput" name="textinput" placeholder="Your name" class="form-control input-md" required="" type="text">
                                
    </div>
</div>

引导表单必填字段

5 个答案: