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以获得类似的东西，仅用于这种情况。

上面的代码工作正常，但现在我想制作＆＃34; subdomain＆＃34;控件的一部分具有固定宽度（例如，100px）并获得＆＃34;相对URL＆＃34;部分填充剩余的可用宽度。但是，将第一个输入元素的宽度设置为固定值会使第一个输入元素和第二个span元素之间出现间隙：http://www.bootply.com/125819

如何消除这种差距？

Answer 1

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

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

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

1 个答案: