Встроенная форма с использованием Bootstrap

Я использую Bootstrap для своего приложения и столкнулся с проблемой, используя встроенные формы. Я приложил скриншот, отображающий текущую форму.Встроенная форма с использованием Bootstrap

Я хочу Sanctd. Сумма текстового поля должна иметь ту же ширину, что и другие текстовые поля, и текст «(Запись должна быть в Lakhs)». Мой текущий код выглядит следующим образом: -

<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. Благодарим за руководство.

источник

2016-09-06 John

Обеспечить весь вид скрипку пожалуйста .. –

пожалуйста найти ссылку jsfiddle: https://jsfiddle.net/g1p4q3dy/2/ – John

Совершено немного изменений в коде.

Рабочий пример на 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; 
    } 
}

Я надеюсь, что это помогает вам

источник

2016-09-07 11:34:48

Thanks Jyoti. Я согласен с ответом – John

Ширина диапазона входных групп-аддонов увеличилась по сравнению с другими полями. Если я изменю DIV на col-sm-3, пролет станет равным другим, но ширина текстового поля также уменьшится. – John

Я обновил свой ответ. Пожалуйста, проверьте [codepen link] (http://codepen.io/jpI/pen/bwNJxB) –

Вставьте под кодом следующую ссылку и посмотрите 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>

источник

2016-09-07 11:02:53

Спасибо Anil за ваше время и помощь – John

Встроенная форма с использованием Bootstrap

ответ

Смежные вопросы