Question

我希望有人可以帮助我。目前它看起来像是：http://www.jsfiddle.net/LhYMW/

但我希望这三种输入类型（1x文本，2x密码）“连接”在一起，就像前两个输入类型一样。我该怎么做？

HTML：

<form class="form-signin" role="form" method="POST">
        <h2 class="form-signin-heading">Registrieren</h2>
        <input type="text" name="username" class="form-control test" placeholder="Username" required/>
        <input type="password"  name="password" class="form-control" placeholder="Passwort" required/>
        <input type="password"  name="password1" class="form-control" placeholder="Passwort wiederholen" required/>
        <button class="btn btn-lg btn-primary btn-block" type="submit" name="registersubmit" value="Login">Einloggen</button>
</form>

Answer 1

您可以使用此CSS移动它：

.form-signin input[type="password"] +input[type="password"] {margin-top:-11px;}
.form-signin input:nth-child(3){border-radius: 0; }

...如果密码字段跟随另一个密码字段，则会将密码字段移动11px。

在您的小提琴的更新中看到：http://jsfiddle.net/LhYMW/9/（已更新 - 它需要11px，而非10，再加上第一次密码的删除舍入）

Answer 2

我在您的HTML

中添加了一个额外的课程.first

<input type="password"  name="password" class="form-control first" placeholder="Passwort" required/>

不只是添加这个CSS：

.form-signin input[type="password"].first {
    margin-bottom: 0;
    border-radius: 0;
}

这是一个有效的FIDDLE

Bootstrap - 连接3种输入类型

2 个答案: