将输入字段顺序从垂直更改为水平？ [关闭]答案

【问题标题】：Change input fields order from vertical to horizontal? [closed]将输入字段顺序从垂直更改为水平？ [关闭]
【发布时间】：2014-09-11 11:14:28
【问题描述】：

这是我的表格：

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

这是我在浏览器中看到的：

我应该改变什么让它看起来像这样：

【问题讨论】：

理想情况下，您也应该使用<label>。
这可能行得通，试试.form-group > .form-control, .form-group > .btn-primary {display: inline-block;}
@MichaelVayvala 也许这就是你想要的，检查那个演示 - bootply.com/usy0b1IwS3

标签： html css forms twitter-bootstrap

【解决方案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>

【讨论】：

正是应该这样做的方式......尤其是“标签”方式。 +1
使用<p> 标签在语义上比<div> 更正确地包装每个控件，根据 w3c 规范：w3.org/TR/html5/forms.html#the-form-element 但这只是我很挑剔，很好的例子！

【解决方案2】：

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

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

Demo

【讨论】：

【解决方案3】：

在input 元素上使用inline-block、inline-block 或float - 试验这些以查看不同的结果，这是学习的好方法！

【讨论】：

【解决方案4】：

引导层 - 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;
}

【讨论】：