Asp.net mvc 如何将引导模板应用于MVC项目

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

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

您希望通过以下方式将对象向右和向左对齐

要进行此更改，请使用标签

但我没有得到预期的结果，为什么会发生这种情况

现在我将告诉您如何实现此模板

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

2.-在my 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>

}

Crear产品
@使用（Html.BeginForm（“Create”、“Productoes”、FormMethod.Post、new{enctype=“multipart/formdata”}））
{
@Html.AntiForgeryToken（）

@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.v_Nombre，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.v_Nombre，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.v_Nombre，“，new{@class=“text danger”}）
@LabelFor（model=>model.FotoFile，htmlAttributes:new{@class=“controllabel col-md-2”}）
客车Foto。。。
@Html.TextBoxFor（modelo=>modelo.FotoFile，新的{type=“file”，id=“files”}）
@LabelFor（model=>model.Precio_Minimo，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Precio_Minimo，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Precio_Minimo，“，new{@class=“text danger”}）
@LabelFor（model=>model.Precio_Maximo，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Precio_Maximo，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Precio_Maximo，“，new{@class=“text danger”}）
@LabelFor（model=>model.Activo，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Activo）
@Html.ValidationMessageFor（model=>model.Activo，“，new{@class=“text danger”}）
@LabelFor（model=>model.Stock，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Stock，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Stock，“，new{@class=“text danger”}）
@LabelFor（model=>model.f_Compra，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.f_Compra，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.f_Compra，“，new{@class=“text danger”}）
@LabelFor（model=>model.Comentarios，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Comentarios，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.Comentarios，“，new{@class=“text danger”}）
@LabelFor（model=>model.Kn_codigotegoria，“Categoria”，htmlAttributes:new{@class=“control label col-md-2”}）
@DropDownList（“Kn_codigocateria”，null，htmlAttributes:new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Kn_codigocateria，“，new{@class=“text danger”}）
}

通过这两个步骤，我已经可以可视化模板的更改，但我之前说过，我不能将对象移动到我想要的地方， 我做错了什么？我是否必须向BundleConfig添加其他引用？我必须在项目中安装一些东西吗

---

有什么帮助吗？

您需要将

col-x-y

div放在类为

.row

的div中，并放在容器中，否则它将无法工作。与此类似（您不需要

col

类，但我只是将其放在这里，以便更容易看到fiddle中的列）：

.col-sm-3
.col-sm-6
.col-sm-3
.col-sm-3
.col-sm-6
.col-sm-3

---

这是引导程序，您可以自己查看。

那么您的引导程序已经生效了？听起来你可能有CSS问题

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