具有引导下拉选择内联文本字段的选项

Question

我有一个horiztonal形式，但我有一点使用＆＃34; form-inline＆＃34;。我几乎可以工作，但是 我试图让内联表单按照我想要的方式运行，但我似乎陷入困境。

这就是我现在所拥有的（jsfiddle）：

<div class="form-group">
     <label class="col-lg-2 control-label">Email address</label>
     <div class="col-lg-10">
         <div class="form-inline">
             <select class="form-control">
                 <option selected="selected">http://</option>
                 <option>https://</option>
             </select>
             <input type="text" class="form-control" id="website" placeholder="Enter website"/>
         </div>
     </div>
</div>

我有两个问题：

1。当屏幕为完整尺寸时，我希望文本输入占用剩余的空间：

2。我一直想保持＆＃34;选择＆＃34;输入字段左侧的框，我不希望它们跳转到两行

我尝试使用各种列长度，但这似乎不起作用。

Answer 1

将下拉列表的宽度设置为15％，将字段宽度设置为75％。然后将它们放在响应容器中，并且当站点调整大小时，它们应保持正确的相对大小。唯一的问题是，一旦它达到移动尺寸，容器宽度的15％将非常小，切断下拉文本。您可以调整responsive.css，以便在该大小时宽度类似于30％和60％。

很高兴它有效！