如何将表单与类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>

前 2 行如下所示：

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

<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 行如下所示：

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

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

行不好：

Answer 1

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

 <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>

Answer 2

正如 Balus 和我之前所说，你不能嵌套 h:form，因为这在 HTML 中是无效的。出于这个原因，您在第 3、4 行的按钮不起作用。您需要分开每个 h:form 以便它可以工作。无论如何，我会帮助你完成第一个表格，这将使你了解如何完成其​​他表格。 如果你使用 form-horizo​​ntal 你不需要使用 row 类。在使用这个 sn-p 之前，您需要设置我留下的 value 属性，因为我不知道您的支持 bean 是怎样的。我建议您阅读有关引导网格系统的信息，以帮助您完成其他形式。 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>