html - 让 Bootstrap 下拉选择选项与文本字段内联

Question

我有一个水平表格，但我有一点使用“内联表格”。我几乎可以正常工作了，但是 我试图让内联表单按照我想要的方式运行，但我似乎被卡住了。

这是我目前拥有的 ( 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。我总是希望将“选择”框保留在输入字段的左侧，我不希望它们跳到两行

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

Answer 1

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

很高兴它成功了!