如何使用Bootstrap 3在与输入相同的行上保持跨度？

Question

我想要的是<form>文字<input>，其右侧显示内联<span>。

我希望<input>缩放到窗口大小，但<span>保持相同的大小，但总是在同一行上{{1} }}

如何使用Bootstrap 3进行此操作？

Answer 1

你能否给出

的视觉解释

  

输入以缩放到窗口的大小，但是跨度保持相同的大小，但始终与输入在同一行。

以下是带输入

的内联跨度示例

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-inline">
  <div class="form-group">
    <input type="text" style="height:150px;"/>
    <span>
    <i class="glyphicon glyphicon-search">Span</i>
  </span>
  </div>
</div>
<div class="row">
  <input class="col-xs-4" style="height:150px;" type="text" /> 
  <span class="col-xs-2">
    <i class="glyphicon glyphicon-search">Span</i>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;