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
bootstrap inline input and button
提问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%;
}

