Question

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

@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>元素是块级的，因此默认情况下它们将堆叠在一起。改变CSS以获得你想要的东西。

Answer 2

使用Bootstrap网格机制您可以按以下方式对齐内容

@Html.BeginForm(){
  <div class="row">
     <div class="col-md-8"> 
        Add the input fields in this column
     </div>
     <div class="col-md-4">
        Add the image portion here
     </div>
  </div>
}

Bootrap网格中列的最大值为12，您可以像我一样将此值划分为单独的列。您可以根据自己的喜好调整col-md- *值。

您可以在以下链接中了解有关引导网格的更多信息 https://getbootstrap.com/examples/grid/

表格在照片的右侧

2 个答案: