我们需要位置Phone
,Name
和Firstname
在左侧,button
在右侧。我尝试使用float-left
和float-right
,第一行是否可以,但是以后更复杂吗?
对于第二行,我尝试使用row
+ col-1..
,但Phone
,Name
和Firstname
未与input
分组
+--------------------------------------------------------------------------------+
| Title | button | |
+------------+-------------------------------------------------------------------+
| Phone | input | Name | input | Firstname | input | | button | |
+------------+-------------------------------------------------------------------+
| Content table |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+--------------------------------------------------------------------------------+
最佳答案
您尝试过flexbox吗?
Bootstrap auto margins的示例:
<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/上的实时示例