Question

我需要制作带有图标（固定宽度）的1行input-group，然后select（自动宽度，取决于选项），然后填充剩余宽度的文本input。

这是骨架：

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <select class="form-control">
    <option>Something</option>
    <option>Another</option>
  </select>
  <input type="text" class="form-control" placeholder="Username">
</div>

以下是代码段：http://jsfiddle.net/qPdcs/722/

它不起作用，因为输入显示在选择下。我尝试了不同的方法：使用宽度，浮点数，表格单元格，白色空间，但没有什么能给出我需要的确切结果。对不起，如果有同样的问题，我无法找到它。

任何想法配偶？

Answer 1

试试这个：

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <select class="form-control" style="width: 40%;">
        <option>Something</option>
        <option>Another</option>
    </select>
    <input type="text" class="form-control" placeholder="Username">
</div>

<style>
.input-group {
    display: flex;
}

.input-group-addon {
    width: 50px;
}
</style>

玩得开心

Bootstrap输入组，带有两个自动宽度元素和一个输入填充剩余宽度

1 个答案: