使用 Bootstrap 附加到文本框的文本框

Question

作为我的要求的一部分，需要在文本框正下方添加一个带有帮助文本的文本框。我正在使用引导程序，任何建议如何实现这一点。 PF 我的代码在下面。附上我的要求和我当前的工作版本。

当前工作版本

必需布局

请帮助我实现这一目标。

尝试了文本框的帮助块，但没有获得所需的输出。

     <!doctype html>
        <html >
          <head>
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
              
          </head>
          <body>
            
            
            <nav class="navbar navbar-default ">
              <div class="container-fluid">    
                <ul class="nav navbar-nav navbar-right pull-right"> 
                    <li class="pull-right"><a href="#">SAVE</a></li>
                    <li class="pull-right"><a href="#">CANCEL</a></li>     
                    <li class="disabled pull-right"><a href="#">RESET</a></li>       
                    <!-- <li class="disabled pull-right"><a href="#"></a></li>	
                    <li class="disabled pull-right"><a href="#"></a></li>		   -->
                </ul>	
              </div>
            </nav>
            
            <div class="container">
             <div class="row"> 
                <form name="vm.uploadForm" role="form" enctype="multipart/form-data">
                    <div class="form-group row ">
                    <label for="title" class="col-xs-3 col-md-3 col-form-label">Title:*</label>
                    <div class="col-xs-8 col-md-9" >
                      <input type="text"  class="col-xs-8 col-md-5" maxlength="255" id="title" value="">
                      <!-- <span class="help-block">If multiple files are selected,file names are appended to title.</span>
                      <small id="emailHelp" class="form-text text-muted">If multiple files are selected,file names are appended to title.</small> -->
                    </div>
                    </div>
                    <div class="form-group row">
                    <label for="infotext" class="col-xs-3 col-md-3 col-form-label"></label>
                    <div class="col-xs-9 col-md-9" >
                      <input type="text" disabled class="col-xs-8 col-md-6" id="infotext" value="If multiple files are selected,file names are appended to title">
                    </div>
                    </div>
                    <div class="form-group row">
                    <label for="desc" class="col-xs-3 col-md-3 col-form-label">Description:</label>
                      <div class="col-xs-8 col-md-5">
                        <textarea class="col-xs-8 col-md-9" rows="3" cols="5" maxlength="255" id="desc"
                        style="resize: none;"></textarea>   
                      </div>
                    </div>           
                </form>        
                </div>
            </div>
          </body>
        </html>

Answer 1

您在输入框中缺少“表单控件”类。

.abc {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="mkpApp" ng-controller="mkpUploadController as vm">


  <nav class="navbar navbar-default ">
    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right pull-right">
        <li class="pull-right"><a href="#">SAVE</a></li>
        <li class="pull-right"><a href="#">CANCEL</a></li>
        <li class="disabled pull-right"><a href="#">RESET</a></li>
        <!-- <li class="disabled pull-right"><a href="#"></a></li>  
            <li class="disabled pull-right"><a href="#"></a></li>          -->
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <form name="vm.uploadForm" role="form" enctype="multipart/form-data">
        <div class="form-group row " style="margin-bottom:0">
          <label for="title" class="col-xs-3 col-md-3 col-form-label">Title:*</label>
          <div class="col-xs-8 col-md-9">
            <input type="text" class="form-control" maxlength="255" id="title" value="">
            <!-- <span class="help-block">If multiple files are selected,file names are appended to title.</span>
              <small id="emailHelp" class="form-text text-muted">If multiple files are selected,file names are appended to title.</small> -->
          </div>
        </div>
        <div class="form-group row">
          <label for="infotext" class="col-xs-3 col-md-3 col-form-label"></label>
          <div class="col-xs-8 col-md-9">
            <input type="text" disabled class="form-control" id="infotext" value="If multiple files are selected,file names are appended to title">
          </div>
        </div>
        <div class="form-group row">
          <label for="desc" class="col-xs-3 col-md-3 col-form-label">Description:</label>
          <div class="col-xs-8 col-md-5">
            <textarea class="col-xs-8 col-md-9" rows="3" cols="5" maxlength="255" id="desc" style="resize: none;"></textarea>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>