无法在Bootstrap 3中获得带有图标效果的输入-Java 学习之路

我无法通过"with optional icons"部分下的Bootstrap文档http://getbootstrap.com/css/#forms-control-validation中列出的反馈图标获得与输入相同的效果 .

这是我的代码：

<form role="form" method="post" id="reg_form"> <!-- Reg form -->
    <div class="form-group has-success has-feedback">
    <label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
      <div class="col-sm-8 form-space">
          <input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
          <span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span> 
        <small>Must be between 4-20 characters long</small>   
      </div>
    </div>
  </form> <!-- //Reg form -->

在下面我有一些JS来改变复选标记，交叉和警告的图标，但这是不相关的，因为一旦我得到基本模板，我可以让它工作 .

基本上，代码确实输出绿色输入框，绿色标签和复选标记，但是在白色和输入字段下方（不在内部，但在外部） . 我真正感兴趣的是只获得输入字段中的复选标记 . 我对输入字段的大纲和标签都不感兴趣 .

我在文档中的部分 Headers 下方读到了这个“警告”，它说：

图标，标签和输入组对于没有标签的输入和右侧带有插件的输入组，需要手动定位反馈图标 . 对于没有标签的输入，请调整topvalue . 对于输入组，根据插件的宽度将正确的值调整为适当的像素值 .

显然我有点必须添加一个输入组，我试过，但没有工作 .

非常感谢您的时间和帮助！任何帮助/提示/建议将不胜感激 .

1 回答

您错过了表单标记中的 class="form-horizontal" .

它应该是

<form role="form" method="post" class="form-horizontal" id="reg_form"> <!-- Reg form -->
     <div class="form-group has-success has-feedback">
     <label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
       <div class="col-sm-8 form-space">
           <input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
           <span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span> 
           <small>Must be between 4-20 characters long</small>   
       </div>
     </div>
</form> <!-- //Reg form -->

DEMO

要将它们全部涂成黑色（而不是绿色），您可以另外执行此操作：

CSS

.mLabelText, #username-r, #username-fg-sp {
    color: #000 !important;
    border-color: #000;
  }

UPDATED DEMO

回复于 2024-04-19T23:39:31+08:00

无法在Bootstrap 3中获得带有图标效果的输入

1 回答

相关问题