Question

我正在使用Bootstrap 3而且我坚持使用某种格式化格式。

E.g。我希望有3个内联表单（每个都带有标签，文本输入和按钮），因此它们的元素（标签，文本输入，按钮）将完全匹配（在列中？）

如果您查看this fiddle example，您可以看到，我几乎通过将col-xs-6设置为每个表单组来实现此目的。但是这会在输入和提交按钮之间产生太大的空间，并且在调整大小时也会很快破坏（当我尝试将整个表单集对齐时，一切都会被破坏）。

那么有没有办法对齐这个表单元素而不是这个？

  <form class="form-inline">
      <div class="form-group col-xs-6 text-right">
        <label for="exampleInputName2">Results per page</label>
        <input type="text" class="form-control" id="exampleInputName2" >
      </div>
      <div class="form-group col-xs-6">
        <button type="submit" class="btn btn-default">Save</button>
      </div>
    </form>

    <form class="form-inline">
      <div class="form-group col-xs-6 text-right">
        <label for="exampleInputName2">Keyword weight</label>
        <input type="text" class="form-control" id="exampleInputName2" >
      </div>
      <div class="form-group col-xs-6">
        <button type="submit" class="btn btn-default">Save</button>
      </div>
    </form>

    <form class="form-inline">
      <div class="form-group col-xs-6 text-right">
        <label for="exampleInputName2">Results per page</label>
        <input type="text" class="form-control" id="exampleInputName2" >
      </div>
      <div class="form-group col-xs-6">
        <button type="submit" class="btn btn-default">Save</button>
      </div>
    </form>

Answer 1

这fiddle可能会对您有所帮助。整个布局可以放入容器中，每个表单都可以赋予margin和text-align css属性。

我认为不需要包含text-right和col-xs-6，而是可以使用container限制max-width并使其更具响应性在小提琴中显示。

Answer 2

为什么不给你的label宽度？如果您将这三个元素放在同一列中，那么您可以将标签设为内嵌块并为其指定宽度（您可能需要使用下面代码段中的完整页面链接来查看此工作）

.form-group > label {
  display: inline-block;
  vertical-align: middle;
  width: 9em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Results per page</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Keyword weight</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Results per page</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>

是否可以将输入/标签对齐多个内联表单？

2 个答案: