我正在制作发票申请表。现在,我连续五列。每列都有输入字段。第四和第五列具有四个输入字段,但第五列字段没有标签。现在,我需要使用引导程序类将四列和第五列对齐,而无需任何自定义CSS。因为我不需要第五栏中的标签。花了几个小时后,我不知道如何对齐两个列。
HTML:
Banking_Deposits = {'January':[15000,9800,10100], 'Feburary':[2500,1400,14100], 'March': [20000,78366]}
store_1 = []
for x in Banking_Deposits:
store_1.append(sum(Banking_Deposits[x]))
print(sum(store_1))
答案 0 :(得分:1)
使用mt-2
到form-group
为空的label
。
在此处了解有关bootstrap-4间距的信息:https://getbootstrap.com/docs/4.0/utilities/spacing/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control"id=""
placeholder="item desc"> </div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
<div class="col-sm-2">
<div class="form-group mt-2">
<label for="inputEmail "></label>
<input type="text" class="form-control"id=""
placeholder="item desc" > </div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
</div>
答案 1 :(得分:1)
首先,我不知道如何使用col-sm-3
连续创建5列。那只会连续产生4列,而第五列则被推到新的一行。
如果您的第4列和第5列都具有4个输入,但是只有第5列输入没有标签。为什么不将第四和第五列合并为一列,并使用行作为输入呢?
<div class="container">
<div class="row">
<div class="col-sm-2 offset-sm-1">
<div class="form-group">
<label>Field</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Field</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Field</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Field 1</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 1 without label" />
</div>
</div>
</div>
<div class="form-group">
<label>Field 2</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 2 without label" />
</div>
</div>
</div>
<div class="form-group">
<label>Field 2</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 3 without label" />
</div>
</div>
</div>
<div class="form-group">
<label>Field 2</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 4 without label" />
</div>
</div>
</div>
</div>
</div>
</div>