2013-06-22 2 views
2

Я пытаюсь создать простую базовую форму, я не могу достичь горизонтальной компоновки при добавлении класса ввода-добавления в форму, он запускает второе поле ввода, которое будет отображаться в такая же линия? интересно, где находится ОШИБКА КОДА? пожалуйста, предложить то, что вызывает IssueBootstrap Form Горизонтальное выравнивание вопроса при добавлении ввода append

 <body> 
     <div class="container"> 
      <hr/> 

      <form class="form-horizontal"> 
      <!--<span class="offset2">Sign Into the Email</span>--> 
       <div class="control-group"> 

        <div class="controls"><span>Welcome to My Email</span></div> 

       </div> 

       <div class="control-group input-append"> 
        <label for="emailid" class="control-label">Email id</label> 
       <div class="controls"> 

        <input type="text" /> 
        <span class="add-on">@</span> 

        </div> 
       </div> 

       <div class="control-group input-append"> 
        <label for="passwd" class="control-label">Password</label> 
        <div class="controls"> 
         <input type="password" /> 
         <span class="add-on">***</span> 
        </div> 
       </div> 

       <div class="control-group"> 
        <div class="controls" > 
        <label class="checkbox"> 
         <input type="checkbox" />Remember Me 
        </label> 
        <button class="btn">Sign In</button> 
        </div> 
       </div> 
      </form> 

     </div>  
      <script src="js/jquery.js"></script> 
      <script src="js/bootstrap.js"></script>  
     </body> 
+0

вы можете создать скрипка? Вы ищете 'form-inline' или' horizontal-form'? – karthikr

+0

Я ищу горизонтальную форму ТОЛЬКО, когда я разделяю класс «ввод-добавление» и теги span, я получаю горизонтальный просмотр, но в тот момент, когда я добавляю класс ввода-добавления в div, входы arent выравниваются горизонтально – CodeGeeek

+0

Прошу прощения , Причина, по которой я спросил, что я спросил, Things выглядел отлично для меня: http://jsfiddle.net/zFmjG/ – karthikr

ответ

1

я бы просто поставить input-append во внутреннем div

<div class="control-group"> 
    <div class="input-append"> 
     <label for="emailid" class="control-label">Email id</label> 
     <div class="controls"> 
      <input type="text" /> <span class="add-on">@</span> 

     </div> 
    </div> 
</div> 

Проверьте это fiddle

.input-append имеет display: inline-block Поэтому вопрос

+0

Абсолютно корректный, лишний бремя добавления Div, спасибо, что вы закончили мой страх :) – CodeGeeek

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