Question

我一直在尝试创建一个包含多个水平和垂直元素但不能得到我想要的引导形式

要求

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

Answer 2

你可以使用一些厚脸皮的花车，然后将片段放入一行并将它们调到最大值。我不确定使用花车是否是最好的主意，因为你会遇到一些奇怪的边缘情况，但干草是什么。

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

Click jsfiddle link above for example

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

2 个答案: