Question

我正在为我的应用程序使用Bootstrap，并且在使用内联表单时遇到了问题。我附上了显示当前表格的屏幕截图。

我想要Sanctd。金额文本框的宽度与其他文本框的宽度相同，文本为＃34;（条目应在Lakhs中）＆＃34;来之后。我目前的代码如下： -

<div class="form-group">
      <label class="col-md-3 control-label">Sanctd. Amount</label>
      <div class="form-inline">
       <div class="form-group">
        <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
        <?php echo form_input($sanctioned_amount); ?>     
        </div>
        </div>                      
        (Entry should be in Lakhs)          
        </div>
    </div>

我使用的是Bootstrap v3.3.6。感谢您的指导。

Answer 1

在您的代码中进行少量修改。

CODEPEN

的工作示例

  <div class="form-group">
        <label class="col-sm-3 control-label">Sanctd. Amount</label>

          <div class="custom">
            <div class="input-group col-sm-6">
              <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
              <input type="text" name="sanctioned_amount" value="" id="sanctioned_amount" class="form-control" />
            </div>
            <span  class="help-text">(Entry should be in Lakhs)</span>
          </div>

      </div>

CSS：

/*Custom  CSS*/
.help-text {
  position:absolute; 
  white-space: pre; 
  margin-left:5px; 
  top: 2px;
  left: 76%;
}
.custom {
  position: relative;
}
.pl-0 {
  padding-left: 0;
}
@media ( max-width: 767px ){
  .help-text {
    position:static; 
    display: block;
    white-space: pre; 
    margin-left:5px; 
    top: 2px;
  }
}

我希望它可以帮到你

Answer 2

将代码粘贴到以下链接并查看DEMO，同时您还需要编写一些响应式CSS。 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h

Bootstrap示例

    <div id="content">
        <div class="container background-white bottom-border">
            <div class="row margin-vert-30">
                <div class="col-md-10">

                    <legend>Financial Aspect</legend>

                    <div class="row">
                        <div class="col-md-8">


                            <form action="#" method="post" accept-charset="utf-8" autocomplete="off" class="form-horizontal">


                                <div class="form-group">
                                    <label class="col-md-3 control-label">Department</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-briefcase"></i></span>
                                        <select name="department_id" id="department_id" class="form-control">
                                            <option value="0" selected="selected">------Select Department------</option>
                                            <option value="12">Agriculture Department</option>
                                            <option value="2">Assistant Registrar of Co-operative Societies</option>
                                        </select>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="col-md-3 control-label">Scheme</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
                                        <select name="scheme_id" id="scheme_id" class="form-control">
                                            <option value="0" selected="selected">------------------------------------</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">Sanctd. Amount</label>                             
                                            <div class="input-group col-md-6">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                                                <input type="text" name="sanctioned_amount" value="" id="sanctioned_amount" class="form-control" />
                                            </div>
                                    <label class="col-md-4 pull-right" style="top:-32px;font-weight:100;left:39px;">(Entry should be in Lakhs)</label> 




                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">Fund Received</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                                        <input type="text" name="fund_received" value="" id="fund_received" class="form-control" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">Fund Utilised</label>
                                    <div class="input-group col-md-6">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                                        <input type="text" name="fund_utilised" value="" id="fund_utilised" class="form-control" />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6  col-md-offset-4 col-xs-offset-4">
                                        <input type="submit" name="financial_submit" value="Submit" class="btn btn-info" id="financial_submit" rel="tooltip" title="save form" />
                                    </div>

                                </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</body>
</html>

使用Bootstrap的内联表单

2 个答案: