Question

我正在Bootstrap中建立一个网站，我需要为页面上的项目制作filter bar。如何构建具有一个或多个输入字段（红色的）和一个或多个下拉列表（蓝色的）的栏。条的宽度应始终为col的100％。

以下是Bootply的示例。如何将所有内容放在一行中，如上图所示？

Answer 1

有几种不同的方法可以解决这个问题。一种方法是使用form-inline并为输入定义一个特定的较小宽度......

<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 form-inline">
  Price from
  <input type="text" class="form-control input-sm" placeholder="min">
  to
  <input type="text" class="form-control input-sm" placeholder="max">
  <select type="text" class="form-control input-sm">
      <option selected="">EUR</option>
      <option value="1">USD</option>
   </select>
</div>

http://bootply.com/sDZybGTQeT

Answer 2

您应该在bootstrap中明智地使用列。所有列的总和应为12，因为bootstrap是12列网格。试试下面的代码。在整页视图中查看。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
  Price from
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
  <input type="text" class="form-control" placeholder="min">
  </div>
  <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1">
  to
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
  <input type="text" class="form-control" placeholder="max">
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
  <select type="text" class="form-control">
      <option selected="">EUR</option>
      <option value="1">USD</option>
   </select>
</div>
</div>
</div>

＆＃13;

内联多个输入字段的引导搜索栏

2 个答案: