字体真棒星号包裹

Question

我使用bootstrap框架的字体很棒。每当我根据需要标记字段时，星号（fa-asterisk）就会正确显示。但是，它显示在文本输入下方。我试过的一些事情：

1. .fa { display:inline; // also tried inline-block

2. 使用div标记输入字段的容器overflow:hidden（表单组）：

   .form-group
   {
       overflow:hidden;
       overflow-wrap:inherit;
   }
   

似乎没有任何效果，仍然将星号包裹在输入字段下方。更改输入字段容器的大小（从col-md-6更小到更小）也无济于事。



这是我的代码：

.formValidation({
      message: 'This value is not valid',
      //err: {
      //    container: 'tooltip'
      //},
      framework: 'bootstrap',
      icon: {
        //required: 'glyphicon glyphicon-asterisk',
        //valid: 'glyphicon glyphicon-ok',
        //invalid: 'glyphicon glyphicon-remove',
        //validating: 'glyphicon glyphicon-refresh'
        required: 'fa fa-asterisk',
        valid: 'fa fa-check',
        invalid: 'fa fa-times',
        validating: 'fa fa-refresh'

      }

这是我的CSS：

.fa-asterisk:before {
  display: inline-block;
  line-height: inherit;
  color: darkred;
  font-size: 7px;
  content: "\f069";
}

这是我的HTML：

<div class="form-group">
  <label class="col-md-6 control-label" for="patientSSN">Patient SSN</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="patientSSN" id="patientSSN" placeholder="" value="">
  </div>
</div>

Answer 1

请出示完整解决方案的代码，快速解决方案可以执行此操作：

.validator{
    white-space:nowrap;
}