html – bootstrap内联输入和按钮

如何在bootstrap 3.0上创建此登录表单

http://joxi.ru/zcBBUtg5CbB8ELTo5CA

我的代码：

<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/

但是,我需要在输入和内联密码输入和提交按钮之间填充.

解决方法

试试这个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%;
}

原文地址：https://www.jb51.cc/html/227224.html