html - 在 Bootstrap 3.3.6 中的内联表单中创建垂直表单元素

Question

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

要求

• 主要<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>

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

Answer 1

这应该有所帮助。它实际上并没有在 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>