在 Bootstrap 3.3.6 的内联表单中创建垂直表单元素答案

【问题标题】：Create vertical form elements inside an inline form in Bootstrap 3.3.6在 Bootstrap 3.3.6 的内联表单中创建垂直表单元素
【发布时间】：2016-12-29 06:13:37
【问题描述】：

我一直在尝试创建一个包含多个水平和垂直元素的引导表单，但无法得到我想要的

要求

主<form> 包含垂直<formfield> 元素
<formfield>元素水平包含所有元素
<formfield> 元素有一个 <div> 元素，其中包含一些垂直元素

我已经完成了前两个要求，没有任何问题，但是当谈到最后一个要求时我一无所知。我尝试在 google 和 stakoverflow 上搜索，但还没有运气。

需要的表格

我现在得到的表格

我的代码

<form id="grn_items_form">
  <div class="form-inline">
    <fieldset id="1" class="grn_item_fieldset ">
      <div class="form-group">
        <button class="form-control" id="1" class="remove_product" type="button">
          <i class="fa fa-trash"></i>
        </button>
      </div>
      <div class="form-group">
        <input class="form-control" id="1" type="text" placeholder="Variation">
      </div>
      <div class="form-group">
        <input class="form-control" id="1" type="text" placeholder="Unit Price">
      </div>
      <div class="form-group">
        <input class="form-control" id="1" class="quantity" type="text" disabled="">
      </div>
      <div class="form-group">
        <button class="form-control" id="1" class="add_serial" type="button">Add Serials</button>
      </div>
      <div class="row ">
        <div class="form-group">
          <input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
          <a class="form-control remove_field" href="#">
            <i class="fa fa-close"></i>
          </a>
        </div>
        <div class="form-group">
          <input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
          <a class="form-control remove_field" href="#">
            <i class="fa fa-close"></i>
          </a>
        </div>
        <div class="form-group">
          <input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
          <a class="form-control remove_field" href="#">
            <i class="fa fa-close"></i>
          </a>
        </div>
      </div>
    </fieldset>
  </div>
  <div class="form-inline">
    <fieldset id="2" class="grn_item_fieldset">
      <div class="form-group">
        <button class="form-control" id="2" class="remove_product" type="button">
          <i class="fa fa-trash"></i>
        </button>
      </div>
      <div class="form-group">
        <input class="form-control" id="2" type="text" placeholder="Variation">
      </div>
      <div class="form-group">
        <input class="form-control" id="2" type="text" placeholder="Unit Price">
      </div>
      <div class="form-group">
        <input class="form-control quantity" id="2" type="text" placeholder="Quantity">
      </div>
    </fieldset>
  </div>
</form>

非常感谢任何有关正确方向的建议。

【问题讨论】：

标签： html css forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用一些厚颜无耻的浮点数，然后将 sn-ps 排成一排，并将它们调到最大.. 我不确定使用浮点数是否是最好的主意，因为您可能会遇到一些奇怪的边缘情况，但是干草是什么。

https://jsfiddle.net/wxjas2np/3/

Click jsfiddle link above for example

【讨论】：

【解决方案2】：

这应该会有所帮助。它实际上并没有在 jsfiddle 上正确显示，而是尝试复制 HTML 并在本地运行。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
	<form>
		<div class="row" id="row1">
			<fieldset>
				<div class="row" id="main">
					<div class="col-md-1">
						<button class="form-control" id="1" class="remove_product" type="button">
							<i class="fa fa-trash"></i>
						</button>
					</div>
					<div class="col-md-2">
						<input type="text" class="form-control" placeholder="Variation">
					</div>
					<div class="col-md-2">
						<input type="text" class="form-control" placeholder="Unit Price">
					</div>
					<div class="col-md-2"></div>
					<div class="col-md-2">
						<button class="form-control" id="1" class="add_serial" type="button">
							Add Serials
						</button>
					</div>
					<div class="col-md-3">
						<div class="col-md-10">
							<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
						</div>
						<div class="col-md-1">
							<a class="form-control remove_field" href="#"> D </a>
						</div>
					</div>
				</div>
				<div class="row" id="sub1">
					<div class="col-md-3 pull-right">
						<div class="col-md-10">
							<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
						</div>
						<div class="col-md-1">
							<a class="form-control remove_field" href="#"> D </a>
						</div>
					</div>
				</div>
				<div class="row" id="sub1">
					<div class="col-md-3 pull-right">
						<div class="col-md-10">
							<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
						</div>
						<div class="col-md-1">
							<a class="form-control remove_field" href="#"> D </a>
						</div>
					</div>
				</div>
			</fieldset>
		</div>
	</form>
</div>

【讨论】：