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

Question

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

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

正如您在上图中看到的那样，由于图片是字段 2 的一部分，因此字段 2 和字段 3 之间有一个空白 space。如果图片的高度大于这些领域之间的差距进一步扩大。

但这不是预期的设计。由于图像的原因，我需要确保字段 2 和字段 3 之间没有间隙或空白 space。

下面是我的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 包含子字段和图像

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

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>

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

Displaying profile picture in modal dialog in AngularJS

html

css

twitter-bootstrap

angularjs

angular-ui-bootstrap