如何在col-4区域纵向放置图片上传表单？

直接调整布局结构，将头像区域与上传表单统一放入左侧空白区域，实现纵向排列，同时修复原布局的结构问题：

<dl class="row">
    <div class="col-sm-4">
        <dt>Profile Detail:</dt>
        <md-card-content>
            <div class="user">
                <img src="https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt="user avatar" class="user-avatar" />
                <md-button class="md-icon-button user-avatar-edit" ng-click="browserAvatar()">
                    <md-icon>photo_camera</md-icon>
                </md-button>
            </div>
            <!-- 图片上传表单，纵向放置在头像下方空白区域 -->
            <div class="avatar-upload-form mt-3">
                <input type="file" id="avatar-upload" class="form-control-file" accept="image/*" />
                <button type="button" class="btn btn-secondary btn-sm mt-2" ng-click="uploadAvatar()">Upload</button>
            </div>
        </md-card-content>
    </div>
    <dd class="col-sm-8">
        <dl class="row">
            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserName)</dt>
            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserName)</dd>
        </dl>
        <dl class="row">
            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserEmail)</dt>
            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserEmail)</dd>
        </dl>
        <dl class="row">
            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.PhoneNumber)</dt>
            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.PhoneNumber)</dd>
        </dl>
        <dl class="row">
            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.HomeAdress)</dt>
            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.HomeAdress)</dd>
        </dl>
        <dl class="row">
            <dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.BirthDate)</dt>
            <dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.BirthDate)</dd>
        </dl>
        <a asp-action="EditProfile" class="btn btn-primary btn-sm">Edit</a>
    </dd>
</dl>

关键调整点： #

• 把原dt标签和头像区域整合到同一个col-sm-4列中，解决原布局结构混乱导致的显示异常问题。
• 在头像模块下方添加上传表单，通过mt-3类设置顶部间距，保证纵向布局的层次感。
• 保留原AngularJS点击事件，需自行实现browserAvatar()（触发文件选择）和uploadAvatar()（提交上传）的业务逻辑。

可选样式优化： #

如果需要让界面更贴合设计，可添加自定义CSS：

.avatar-upload-form {
    padding: 0 10px;
}
.user-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}
.user {
    position: relative;
    display: inline-block;
}
.user-avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
}

内容的提问来源于stack exchange，提问作者John