bootsrap3：如何添加内联选择和输入，使其适合所有宽度？

Question

我想使用bootstrap创建一个快速代码段：

选择+输入+ 3个按钮，使其全部适合1个单行（内联）

https://jsfiddle.net/tso3oseg/

<div class="well well-sm margin-bottom-no">
    <div class="input-group">
        <select class="form-control">
        <option value="1">all</option>
        </select>
          <input type="text" id="chatInput" class="form-control " placeholder="Ecrire texte ici...">      
      <span class="input-group-btn">
        <button class="btn  btn-pretty" id="attachBtn" type="button"><i class="fa fa-smile-o"></i></button>
        <button class="btn btn-success btn-pretty" id="attachBtn" type="button"><i class="fa fa-paperclip"></i></button>
        <button class="btn btn-info btn-pretty" id="sendBtn" type="button">Send</button>
      </span>
    </div>
  </div>

我无法输入并选择适合同一行。

结果是：

Answer 1

在这里，您的答案会检查codepen

处的代码

<div class="well well-sm margin-bottom-no">
  <div class="input-group">
    <select class="form-control">
        <option value="1">all</option>
        </select>
    <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
    <input type="text" id="chatInput" class="form-control " placeholder="Ecrire texte ici...">
    <div class="input-group-btn">
      <button class="btn  btn-warning" id="attachBtn" type="button"><i class="fa fa-smile-o"></i></button>
      <button class="btn btn-success btn-pretty" id="attachBtn" type="button"><i class="fa fa-paperclip"></i></button>
      <button class="btn btn-info btn-pretty" id="sendBtn" type="button">Send</button>
    </div>
  </div>
</div>

Answer 2

使用form-inline并将输入包装在input-group-btn ..

中

<div class="well well-sm margin-bottom-no form-inline">
    <div class="input-group">
        <select class="form-control">
            <option value="1">all</option>
        </select>
        <span class="input-group-btn">
            <input type="text" id="chatInput" class="form-control" placeholder="Ecrire texte ici..."> 
        </span>
        <span class="input-group-btn">
            <button class="btn  btn-pretty" id="attachBtn" type="button"><i class="fa fa-smile-o"></i></button>
            <button class="btn btn-success btn-pretty" id="attachBtn" type="button"><i class="fa fa-paperclip"></i></button>
            <button class="btn btn-info btn-pretty" id="sendBtn" type="button">Send</button>
        </span>
    </div>
</div>

http://www.codeply.com/go/DuYpzrhZIR