将输入字段顺序从垂直更改为水平？

Question

这是我的表格：

<form novalidate class="form-group" ng-hide="tab==1">
    Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> 
    Min Price: <input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum" />
    Max Price: <input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum" />
    <button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum)">Filter</button>
</form>

这是我的style.css：

input {
    width: 100px;
}

以下是我在浏览器中的内容：

我改变什么使它看起来像这样：

Answer 1

以下是一些选项..

http://www.bootply.com/cFtRhRycYE

使用col-*创建单行输入，但这在每个输入之间具有通常的沟槽间距。如果你想要内联较少的间距，你可以做类似的事情。

<form novalidate="" class="form-inline" ng-hide="tab==1">
  <div class="form-group">Reviews Min:<br><input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum"> </div>
  <div class="form-group">Min Price:<br><input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum"> </div>
  <div class="form-group">Max Price:<br><input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum"> </div>
  <div class="form-group"><br><button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum)">Filter</button> </div>
</form>

Answer 2

Bootstrap将输入显示设置为block，宽度为100%。您可以通过应用

覆盖它

 input {
  display:inline-block !important;
  width: 100px !important;
}

Demo

Answer 3

在inline-block元素上使用inline-block，float或input - 尝试使用这些元素来查看不同的结果，这是一种很好的学习方法！

Answer 4

Bootply - DEMO

您应该使用额外的span代码来扭曲input和文字（不是按钮）并应用inline-block;

<强> HTML：

<form novalidate="" class="form-group" ng-hide="tab==1">
  <span class="form-span">Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum"></span>
  <span class="form-span">Min Price: <input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum"></span>
  <span class="form-span">Max Price: <input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum"></span>
  <button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum)">Filter</button>
</form>

<强> CSS：

.form-span {
    width: 200px;
    display: inline-block;
}