html - HTML&CSS + Twitter Bootstrap：左侧的任何表单元素和右侧的按钮（行部分）

Question

我们需要 position Phone, Name, and Firstnameto left and buttonto right。我尝试使用float-leftand float-right，第一行是否可以，但之后是否更复杂。对于第二行，我尝试使用row+ col-1..but Phone, Name, and Firstnamenot grouped with theinput

  +--------------------------------------------------------------------------------+
  |  Title                                                              | button | |
  +------------+-------------------------------------------------------------------+
  |  Phone | input |    Name | input |    Firstname | input |           | button | |
  +------------+-------------------------------------------------------------------+
  |  Content table                                                                 |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  +--------------------------------------------------------------------------------+

标签： htmlcsstwitter-bootstrap

Answer 1

你试过flexbox吗？

Bootstrap 自动边距示例：

<nav class="navbar">
  <form class="form-inline w-100 d-flex">
    <div class="form-group mr-4">
      <label for="field-1"class="mr-2">Field #1</label>
      <input class="form-control" id="field-1">
    </div>

    <div class="form-group mr-4">
      <label for="field-1"class="mr-2">Field #2</label>
      <input class="form-control" id="field-2">
    </div>

    <button class="btn btn-success ml-auto">Button</button>
  </form>
</nav>

https://jsfiddle.net/cichy380/5svek2xn/上的实时示例