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

时间:2015-08-05 08:50:02

标签: css angularjs html5 twitter-bootstrap angular-ui-bootstrap

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

Intended UI design

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

Current UI Design

如上图所示,由于图像是场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。

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

2 个答案:

答案 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>