如何使用无线电插件为错误消息输入样式 - twitter bootstrap

Question

我正在尝试使用无线电插件为输入字段设置样式以显示错误消息（.help-block）。没有 radio addons 它可以正常工作。但是使用插件，文本会跳转到输入字段下的新行。

看起来像这样

HTML

<div class="input-group has-error">
  <span class="input-group-addon">
    <input type="radio" name="answer" value="a">
  </span>
  <input type="text" class="form-control" placeholder="Your answer here..." name="a" id="a">
  <span class="help-block">The a field is required</span>
</div>

那么我应该怎么做bootstrap 3提供的。

Answer 1

我做错了。

<div class="form-group has-error">
  <label for="a">Answer A</label>
    <div class="input-group ">
      <span class="input-group-addon">
        <input type="radio" name="answer" value="a">
      </span>
      <input type="text" class="form-control" placeholder="Your answer here..." name="a" id="a">
   </div>
   <span class="help-block">The a field is required.</span>
</div>

Answer 2

如果您想在同一行显示消息，而不是help-block（如果足够），您可以使用tool-tip，这里是 DEMO

<强> HTML

 <div class="input-group has-error"> 
    <span class="input-group-addon">
        <input type="radio" name="answer" value="a" class=""  />
    </span>

    <input type="text" class="form-control " placeholder="Your answer here..." name="a" id="a" /> 
    <span class="input-group-addon">
        <span data-toggle="tooltip" title="" data-container="" >
           This field is required
        </span>
    </span>
</div>