Sky-Form/Bootstrap 3：如何渲染多个输入，使其看起来像 1 个大输入？

【问题标题】：Sky-Form/Bootstrap 3: How to render multiple inputs that make it looks like 1 large input?Sky-Form/Bootstrap 3：如何渲染多个输入，使其看起来像 1 个大输入？
【发布时间】：2014-05-26 23:06:07
【问题描述】：

我正在使用 sky-form 库和 bootstrap 3 来呈现我的表单。

我有 3 个输入要打包在一起。

我知道这需要自定义 css 规则，但我无法使其按预期工作。

请查看附图以更好地了解我的需求。

10 倍

【问题讨论】：

请发表您的尝试。

标签： forms css twitter-bootstrap

【解决方案1】：

这是一个开始。您可能想稍微调整一下焦点。

http://jsfiddle.net/isherwood/vqkma/

<style>
.joined-left {
    margin-right: -10px;
}
.joined-right {
    margin-left: -10px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
</style>

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control joined-left" id="exampleInputEmail2" placeholder="Enter email" />
</div>
<div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control joined-right" id="exampleInputPassword2" placeholder="Password" />
</div>

【讨论】：