html – bootstrap内联输入和按钮

发布时间：2020-12-14 16:38:43 所属栏目：资源来源：网络整理

导读：如何在bootstrap 3.0上创建此登录表单 http://joxi.ru/zcBBUtg5CbB8ELTo5CA 我的代码： form role="form" class="form-inline" input type="email" class="form-control input-sm" placeholder="Адрес электронной почты" div class="f

如何在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%;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!