css - 照片右边的表格

Question

我在使用 Bootstrap 时遇到了一些问题。我现在有点困惑。我需要在 Asp.net MVC 中的照片右侧添加一个表单。我的主页上有一个渲染主体，然后在另一个 View 中我有这个 Bootstrap 代码:

@using (Html.BeginForm("EditarUtilizador", "Account", null, FormMethod.Post,
                                                  new { enctype = "multipart/form-data" }))
{
    System.Diagnostics.Debug.WriteLine(@Html.DisplayFor(modelItem => modelItem.ImagePath));
    <div class="form-horizontal">
        <h4>Editar Perfil Pessoal</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <fieldset class="col-md-3">
        @if (Model.ImagePath != null)
        {
            <img src="~/Images/@Html.DisplayFor(modelItem => modelItem.ImagePath)" width="150" height="150" />
        }
        else
        {
            <img src="~/StaticImages/default-user-image.png" width="150" height="150" />
        }
        <div class="editor-field">
            <input id="ImagePath" title="Upload a product image"
                   type="file" name="file" />
        </div>
    </fieldset>

    <div class="form-group" >
        @Html.LabelFor(m => m.Utilizador, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DisplayFor(m => m.Utilizador, new { @class = "form-control"})
            @Html.ValidationMessageFor(model => model.Utilizador, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.EditorFor(m => m.Password, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.NovaPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.EditorFor(m => m.NovaPassword, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DisplayFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Telemóvel, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.EditorFor(m => m.Telemóvel, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Telemóvel, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.DataNascimento, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.EditorFor(m => m.DataNascimento, new { @class = "form-control", type = "date", })
            @Html.ValidationMessageFor(model => model.DataNascimento, "", new { @class = "text-danger" })
        </div>

我目前的情况是这样的:

我想让表格出现在右边，但在我的例子中它出现在图像下方。

Answer 1

因为 <div>元素是 block 级的，默认情况下它们会堆叠在一起。更改 CSS 以获得您想要的内容。