twitter-bootstrap - Bootstrap 3 : how to add inline select and input so it fits all width?

标签 twitter-bootstrap css twitter-bootstrap-3

我想使用 bootstrap 创建一个快速片段:

select + input + 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>

我无法使输入和选择适契约(Contract)一行。

结果是:enter image description here

最佳答案

在这里你的答案检查代码在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>

关于twitter-bootstrap - Bootstrap 3 : how to add inline select and input so it fits all width?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39082854/

相关文章:

jquery - 滚动时网站的前端转到一边

css - Bootstrap 3 响应式 h1 标签

html - Bootstrap 3.0.3 navbar-right 和 pull-right

html - 引导边界问题

javascript - ng-show - 使用服务作为范围参数

javascript - 如何在 Bootstrap 中垂直对齐输入元素?

javascript - 如何在点击时更改定价表中的价格

html - 在曲线中显示 html 列表

twitter-bootstrap - 使用 react-bootstrap 扩展表内的行

php - 嵌入式 Youtube 视频的响应式布局问题