具有行或内联形式的Bootstrap3水平表单

Question

我想完成一个水平表单，每行包含多个左对齐表单控件的行。最终布局应如下所示

首先，我希望图标显示NEXT为用户姓名右侧的用户名，就像上面显示的图像一样。

我使用GWT和bootstrap3.3.2。我读了很多关于水平形式的混合 使用内联表单或使用水平表单以及表单控件行。我最喜欢的最后一种方法。

我准备了一个显示我的第一个问题的bootply（我将创建第二个bootply和stackoverflow帖子以解决其他问题）。 http://www.bootply.com/hheckner/GiPzaqWHlT

正如您在那里看到的那样，图标与用户名称不完全对齐（垂直）。此外，我想显示用户名称的NEXT图标，因此如果用户名更长，则图像应向右移动，反之亦然。使用网格在这里没有帮助（至少我认为）。图标应该立即显示在用户名旁边？

我该如何做到这一点？

Answer 1

要在某些文字旁边显示图标，您只需要在文字后面延伸，但仍然在val t1 = new DefaultUserServiceComponent with UserRepositoryJPAComponent { val em = new EntityManager() } t1.userService.findAll val t2 = new MyDefaultService with JPAUserRepository { val em = new EntityManager } t2.findAll 元素内。

我使用Bootstrap Grid在屏幕截图中提供的形式有点类似。可能有多种解决方案，在代码行方面可能更好，但是当你习惯了网格系统时，这应该是非常快的方法。

我必须警告你我使用<p>表示所有文字，而某些文字没有特殊元素，所以你应该相应地修复它。 Bootstrap的<h4></h4>类只有在视口大于768px时才有效 - 你可能没有看到JSFiddle上的工作示例，但是当你在屏幕上看到它大于768px时，它应该没问题。

form-inline

JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/