正在处理模态对话框,我需要在其中显示用户的个人资料图片以及其他数据,ui应该如下图所示
然而,我提出的布局设计并没有跨越多行的图像。以下是我的对话框的当前设计
如上图所示,由于图像是场2的一部分,场2和场3之间存在空白。如果图像的高度更大,则这些场之间的间隙增大进一步
但这不是预期的设计。我需要确保因图像而在字段2和3之间没有间隙或空白区域。
以下是我的HTML
<div class="modal-body">
<div class="form-group">
<label class="col-sm-4 control-label">Field 1: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="field1" id="field1" ng-model="field1" required>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" name="subfield1" id="subfield1" ng-model="subfield1" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Field 2: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="field2" id="field2" ng-model="field2" required>
</div>
<div class="col-sm-2">
<img class="col-sm-2" src="image.png" class="img-responsive img-circle">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Field 3: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="field3" id="field3" ng-model="field3" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Field 4: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="field4" id="field4" ng-model="field4" required>
</div>
</div>
</div>
使用带引导程序的angularjs。
解决此布局问题的任何指针都会有所帮助
答案 0 :(得分:1)
您需要更改布局。它必须包含两个cols包装器,第一个col包含主要字段,第二个col包含子字段和图像
此外,您可以将图像设置为绝对图像,但这不是最佳方式
答案 1 :(得分:0)
它有点像围绕图像的文字。为您的图片添加float:right
样式。
<div class="col-sm-2" style="float: right">
<img class="col-sm-2" src="image.png" class="img-responsive img-circle">
</div>