在AngularJS的模态对话框中显示个人资料图片

Question

我正在处理一个模态对话框，我需要在其中显示用户的个人资料图片以及其他数据，用户界面应该像下面的图像

但是，我提出的布局设计并没有跨越多行的图像。以下是我的对话框的当前设计

如上图所示，字段 2 和字段 3 之间有一个空白区域，因为图像是字段 2 的一部分。如果图像的高度更大，则这些字段之间的间隙会增加进一步。

但这不是预期的设计。由于图像，我需要确保字段 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。

任何解决此布局问题的建议都会有所帮助

Answer 1

您需要更改布局。它必须包含两个 cols 包装器，第一个 col 包含您的主要字段，第二个 col 包含子字段和图像

另外，您可以将图像设置为绝对，但这不是最好的方式

Answer 2

这有点像文字环绕图像。为您的图片添加float:right 样式。

<div class="col-sm-2" style="float: right">
  <img class="col-sm-2" src="image.png" class="img-responsive img-circle">
</div>