如何使用类form-group，form-horizo​​ntal的表单

Question

上图中捕获的页面包含4行等容器。 我可以描述它的结构如： ...

<div class="container">
  <h:form>
    <div class="row"> <!--row1-->
      ...
    </div>
    <div class="row"> <!--row2-->
      ...
    </div>
    <div class="row"> <!--row3-->
      ...
    </div>
    <div class="row"> <!--row4-->
      ...
    </div>
  </h:form>
</div>

问题是：如何让它看起来像这样：

我想我应该用 h：form class =“form-horizo​​ntal”和h：form class =“form-group”

如果我像这样设计我的页面：

<div class="container">
  <h:form class="form-horizontal">
    <div class="row form-group"> <!--row1-->
          ...
    </div>
            <div class="row form-group"> <!--row1-->
          ...
    </div>
    <div class="row"> <!--row3-->
      ...
    </div>
    <div class="row"> <!--row4-->
      ...
    </div>
  </h:form>
</div>

前两行看起来像这样：

如果我像这样设置页面样式：

<div class="container">
   <h:form class="form-horizontal">
      <div class="row form-group">
          <div class="col-sm-1">
             ...
             <!--inputText-->
           </div>
          <div class="col-sm-1">
             ...
             <!--inputText-->
           </div>
          <div class="col-sm-1">
             ...
             <!--inputText-->
           </div>
          <div class="col-sm-1">
             ...
             <!--inputText-->
           </div>
          <div class="col-sm-1">
             ...
             <!--commandButton-->
           </div>
           <div class="col-sm-7"></div>
       </div>
       <div class="row form-group">
       <div class="col-sm-1 col-sm-offset-3">
          <div class="col-sm-1">
             ...
             <!--inputText-->
           </div>
          <div class="col-sm-1">
             ...
             <!--commandButton-->
           </div>
           <div class="col-sm-7"></div>
       </div>
   </h:form>
</div>

前两行看起来像：

，如果我使用上面的结构设置页面样式，但是使用2个单位的列：

<div class="col-sm-2">

行不好：

Answer 1

正如Balus和我之前所说，你不能嵌套h：form，因为它在HTML中是无效的。因此，第3,4行的按钮不起作用。您需要将每个h：表单分开以便它可以工作。无论如何，我会用第一个表格帮助你，这将提供你如何做其他形式的见解。 如果使用form-horizo​​ntal，则不需要使用行类。在使用这个代码片段之前，你需要设置我留下的值属性，因为我不知道你的支持bean是怎么回事。我建议你阅读一下bootstrap网格系统，以帮助你做其他表格。 http://getbootstrap.com/examples/grid/

    <div class="container">
     <h:form styleClass="form-horizontal">    
        <div class="form-group">
           <div class="col-md-2">
             <h:inputText value="#" />
           </div>
           <div class="col-md-2">
             <h:inputText value="#" />
           </div>
           <div class="col-md-2">
             <h:inputText value="#" />
           </div>
           <div class="col-md-2">
              <h:inputText value="#" />
           </div>
           <div class="col-md-4">
              <h:commandLink value="Add" />
           </div>
       </div>
     </h:form>
    </div>

Answer 2

罗伯托是对的。你不应该在那里使用嵌套元素。这是一个干净的例子，你可以使用引导程序

 <form class="form-horizontal">
  <div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 <div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-    label">Password</label>
<div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3"      placeholder="Password">
</div>
</div>
 <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
   </div>
 </div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">Sign in</button>
  </div>
   </div>
   </form>