twitter-bootstrap 引导内联输入和按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18987543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:34:27  来源:igfitidea点击:

bootstrap inline input and button

htmlcsstwitter-bootstrap

提问by Maksim Borodov

how create this login form on bootstrap 3.0

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

http://joxi.ru/zcBBUtg5CbB8ELTo5CA

http://joxi.ru/zcBBUtg5CbB8ELTo5CA

My code:

我的代码:

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

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

But, i need padding between inputs and inline password input and submit button.

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

采纳答案by Donovan Charpin

Try with this jsFiddle : http://jsfiddle.net/Ls684/2/

试试这个 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

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%;
}