Bootstrap 内联输入框和按钮

Question

Bootstrap 内联输入框和按钮

8

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

我的代码：

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

但是，我需要在输入框之间和行内密码输入框与提交按钮之间增加填充。

- Maksim Borodov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Donovan Charpin · Accepted Answer

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