Question

是否可以在Bootstrap中插入带有水平形式的select元素的表单。

我需要在表单组中插入一个带有select元素的表单。

Note: Bootply messes the code and remove some form tags, so copy the code below.

元素未对齐的问题。这两个选择代码中没有对齐的国家和语言，并在它们之后混淆代码。

enter image description here

代码再次出现在这里：

<div class="container-fluid">

<form class="form-horizontal" role="form">

  <div class="form-group">
    <label class="col-sm-4 control-label" for="fname">First name:</label>
    <div class="col-sm-8">
      <input class="form-control" name="fname" id="fname" type="text">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="lname">Last name:</label>
    <div class="col-sm-8">
      <input class="form-control" name="lname" id="lname" type="text">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="country">Country:</label>
    <div class="col-sm-8">
       <form>
          <select name="country" id="country" class="form-control">
            <option value="US">US</option>
            <option value="UK">UK</option>
            <option value="CA">CA</option>
          </select>
      </form>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="language">Language:</label>
    <div class="col-sm-8">
       <form>
          <select name="language" id="language" class="form-control">
            <option value="en-US">en-US</option>
            <option value="en-UK">en-UK</option>
            <option value="fr">FR</option>
          </select>
      </form>
    </div>
  </div>
 </form>
</div>

Answer 1

您的代码中有多个<form></form>值。由于这只是一种形式，因此您需要的是开头的表单类和结尾的表单类。这就是它变得错位的原因。看看我的小提琴 http://jsfiddle.net/jxe78828/

Answer 2

根据HTML5 specs，您无法将一个表单嵌套在另一个表单中：

4.10.3表单元素

...

内容模型：       流内容，但没有表单元素后代。

Bootstrap的设计假设您将使用有效的HTML结构。因此，您可能需要重新考虑HTML结构，以及是否有其他方法可以实现您尝试使用嵌套的<form>元素。

Answer 3

试试这个：

<form class="form-horizontal" role="form">

 <div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
  <input class="form-control" name="fname" id="fname" type="text">
</div>
</div>

 <div class="form-group">
 <label class="col-sm-4 control-label" for="lname">Last name:</label>
 <div class="col-sm-8">
  <input class="form-control" name="lname" id="lname" type="text">
 </div>
 </div>

<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
      <select name="country" id="country" class="form-control">
        <option value="US">US</option>
        <option value="UK">UK</option>
        <option value="CA">CA</option>
      </select>
    </div>
 </div>

 <div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
      <select name="language" id="language" class="form-control">
        <option value="en-US">en-US</option>
        <option value="en-UK">en-UK</option>
        <option value="fr">FR</option>
      </select>
    </div>
  </div>
 </form>
 </div>

您还可以在此处查看我的JSFiddle

Answer 4

经过大量搜索后，人们回答时没有清楚地阅读问题，误解了我的需要。显然，这个问题意味着我需要在表单中使用单独的表单或子表单，这样就可以通过这种方式使用HTML 5属性form：

<select name="country" id="country" class="form-control" form="country-form">

你可以在任何地方放空格：

<form id="country-form"></form>

甚至此表格不存在，在提交容器表格时，不会包含上述表格字段。

表单组内的Bootstrap表单

4 个答案: