Question

我正在改变我的MVC项目的风格，因为我使用Bootswach及其不同的模板，问题是视图中的视觉变化无效，例如......

它有一个非常广泛的形式，如下所示

并且您希望以下列方式将对象向右和向左对齐

要进行此更改，请使用标记<div class = "col-md-6"> 但是我没有得到预期的结果，为什么会这样呢？

现在我将告诉你如何实现这个模板......

1.-下载bootstrap watch bootstrap.css文件并将其添加到我的项目

2.-在我的BundleConfig.cs中更改你下载的boostrap.css文件

3.-并最终修改我的观点

我的观点：

<h2>Crear Producto</h2>


@using (Html.BeginForm("Create", "Productoes", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="col-md-6">

            <div class="form-group">
                @Html.LabelFor(model => model.v_Nombre, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.v_Nombre, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.v_Nombre, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.FotoFile, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="file-input-new">
                        <div class="input-group" style="width:280px">
                            <div tabindex="500" class="form-control file-caption">
                                <div class="file-caption-name" id="NombreArchivo">
                                </div>
                            </div>
                            <div class="input-group-btn" style="height:auto">
                                <div tabindex="500" class="btn btn-primary btn-file">
                                    <i class="glyphicon glyphicon-folder-open"></i>
                                    Buscar Foto...
                                    @Html.TextBoxFor(modelo => modelo.FotoFile, new { type = "file", id = "files" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group">
                @Html.LabelFor(model => model.Precio_Minimo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Precio_Minimo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Precio_Minimo, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Precio_Maximo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Precio_Maximo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Precio_Maximo, "", new { @class = "text-danger" })
                </div>
            </div>

        </div>

        <div class="col-md-6">

            <div class="form-group">
                @Html.LabelFor(model => model.Activo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Activo)
                        @Html.ValidationMessageFor(model => model.Activo, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Stock, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Stock, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Stock, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.f_Compra, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.f_Compra, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.f_Compra, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Comentarios, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Comentarios, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Comentarios, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Kn_CodigoCategoria, "Categoria", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("Kn_CodigoCategoria", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Kn_CodigoCategoria, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Crear" class="btn btn-outline-success" />
                </div>
            </div>



        </div>

    </div>

}

通过这两个步骤，我已经可以看到模板的变化，但我之前说过，我无法移动我想要的对象，我究竟做错了什么？我是否必须添加其他对BundleConfig的引用？我是否必须在项目中安装一些东西？

对我有任何帮助吗？

Answer 1

您需要将col-x-y div放在带有类.row的div中并放在容器内，否则它将无效。与此类似（你不需要col类，但我只是把它放在这里，以便更容易看到小提琴中的列）：

<div class="container">
  <!--This will not work -->
  <div class="col col-sm-3">.col-sm-3</div>
  <div class="col col-sm-6">.col-sm-6</div>
  <div class="col col-sm-3">.col-sm-3</div>
  <!-- This will work -->
  <div class="row">
    <div class="col col-sm-3">.col-sm-3</div>
    <div class="col col-sm-6">.col-sm-6</div>
    <div class="col col-sm-3">.col-sm-3</div>
  </div>
</div>

以下是Fiddle，您可以自己查看。

如何将Bootstrap模板应用于MVC项目

1 个答案: