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

Question

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

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

正如您在上图中看到的，由于图像是场 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 与 Bootstrap 一起使用。

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

Answer 1

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

另外，你也可以把图片放在绝对位置，但这不是最好的方式