css - 如何在单行中制作元素？

Question

我在我的元素中使用了 bootstrap。

区域宽度为350px。

我有这个 html 元素:

   <form class="form-inline">
        <div class="input-group input-group-sm col-xs-5" >
            <input type="text" class="form-control" placeholder="search">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>

        <div class="input-group input-group-sm">
                <select class="form-control" ng-model="" ng-options="">
                    <option value="">- authority-</option>
                </select>
        </div>
    </form>

这里是 plunker .

如何在一行中制作搜索框和下拉列表。

Answer 1

你不需要 css 来解决这个问题，你可以使用 Bootstrap 样式来完成。

将表单包裹在一个 12 宽的容器 (col-lg-12) 中，并将每个输入包裹在一个 6 宽的容器 (col-lg-6) 中。 (为了简单起见，我在示例中只使用了桌面尺寸)

这看起来像:

<div class="col-lg-12">
   <!-- start form -->
   <div class="col-lg-6">
      <!-- input -->
   </div>
   <div class="col-lg-6">
      <!-- input -->
   </div>
   <!-- end form -->
</div>

这样 Bootstrap 会将屏幕切成两半 (12/2 = 6) 并将输入框放在那里。

要使其与您的代码一起使用，请查看此 fiddle

注意 我添加了 col-lg、col-md、col-sm 和 col-xs，无论屏幕大小如何，它们都显示在同一行上。

编辑: 要将所有这些放在另一个面板中，请使用:

<div class="panel panel-default">
  <div class="panel-body">
     <!--    form row -->
  </div>
</div>

工作 fiddle :http://jsfiddle.net/92z54z04/596/