css - 在 Bootstrap 中组合适合宽度和固定宽度的文本输入

Question

我正在尝试实现 URL 输入控制，用户可以在其中输入相对 URL 和可选的子域，它看起来像这样:

http://www.bootply.com/125817

.middle-addon
{
    border-left: 0 none;
    border-right: 0 none;
}

<div class="input-group">
    <span class="input-group-addon">http://</span>
    <input class="form-control" placeholder="Subdomain" type="text">
    <span class="input-group-addon middle-addon">.example.com/</span>
    <input class="form-control" placeholder="Relative URL" type="text">
</div>

我知道 Bootstrap 不支持开箱即用的单行多个输入插件，因此我尝试添加一些额外的 CSS 以获得类似的东西，仅针对这种情况。

上面的代码工作正常，但现在我想让控件的“子域”部分具有固定宽度(比如 100 像素)，并让“相对 URL”部分填充可用宽度的其余部分。但是，将第一个输入元素的宽度设置为固定值会使第一个输入元素和第二个跨度元素之间存在差距:http://www.bootply.com/125819

我怎样才能消除这个差距？

Answer 1

您可以尝试使用负右边距实际减少子域输入的宽度。 http://www.bootply.com/125829

[placeholder="Subdomain"] {
  margin-right:-120px;/* will give extra width to other input */
}