如何使用 Bootstrap 3 将跨度与输入保持在同一行? [英] How do I keep a span on the same line as an input using Bootstrap 3?

问题描述

我想要的是一个带有文本 的

，它有一个 内嵌显示在它的权利.

我希望 缩放到窗口的大小，但 保持相同的大小，但始终在 与相同的行.

我将如何使用 Bootstrap 3 执行此操作?

解决方案

你能不能给一个可视化的解释

<块引用>

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

这是一个带有输入的内联跨度示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="form-inline"><div class="form-group"><input type="text" style="height:150px;"/><跨度><i class="glyphicon glyphicon-search">跨度</i></span>

<div class="row"><input class="col-xs-4" style="height:150px;"类型=文本"/><span class="col-xs-2"><i class="glyphicon glyphicon-search">跨度</i></span>

What I want is a <form> with a text <input> that has a <span> displayed inline on the right of it.

I want the <input> to scale to the size of the window, but the <span> to stay the same size but always on the same line as the <input>.

How would I do this, using Bootstrap 3?

解决方案

Could you give a visual explanation of

input to scale to the size of the window, but the span to stay the same size but always on the same line as the input.

Here is an example of inline span with input

<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>

这篇关于如何使用 Bootstrap 3 将跨度与输入保持在同一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！