2013-09-24 12 views
8

jak utworzyć ten formularz logowania na bootstrap 3,0bootstrap inline wejściowe i przycisk

http://joxi.ru/zcBBUtg5CbB8ELTo5CA

Mój kod:

<form role="form" class="form-inline"> 
    <input type="email" class="form-control input-sm" placeholder="Адрес электронной почты"> 
    <div class="form-group"> 
     <input type="password" class="form-control input-sm" placeholder="Пароль"> 
     <button class="btn btn-primary btn-sm">Войти</button> 
    </div> 

</form> 

http://jsfiddle.net/mborodov/Ls684/

Ale muszę dopełnienie między wejściami i inline hasło przycisk wprowadzania i wysyłania.

Odpowiedz

6

Spróbuj z tym jsFiddle: http://jsfiddle.net/Ls684/2/

<form role="form" class="padding-15 black round-5 form-inline"> 
    <input type="email" class="form-control input-sm" placeholder="Адрес электронной почты"> 
    <div class="form-group"> 
      <input type="password" class="form-control input-sm" placeholder="Пароль"> 
      <button class="btn btn-primary btn-sm">Войти</button> 
    </div> 
</form> 

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 

.form-control[type="email"]{ 
    width : 100%; 
    margin-bottom: 10px; 
} 

.form-control[type="password"]{ 
    width : 60%; 
    float : left; 
} 

button{ 
    width : 30%; 
    float : left; 
    margin-left: 10%; 
} 
+0

Thx, ale ten układ nie reaguje. Potrzebuję szerokości kolumn dla wszystkich urządzeń –

+0

thx, ale w jaki sposób sprawić, aby rozmiar i hasło dla przycisku wysyłania poprawiały się w% –

+0

Aby mieć responsywną formę, musisz zmodyfikować moje css za pomocą pourcentage. jsfiddle.net/Ls684/2 –

Powiązane problemy