【问题标题】:How to apply the Bootstrap template to the MVC project如何将 Bootstrap 模板应用到 MVC 项目中
【发布时间】:2018-10-23 14:11:04
【问题描述】:

我正在更改我的 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 添加其他引用?我必须在项目中安装一些东西吗?

对我有什么帮助吗?

【问题讨论】:

  • 所以你已经让Bootstrap生效了?听起来您可能会遇到与边距/填充冲突的 CSS 问题。为了让我们更好地帮助您,您能否更新您的问题,以便在minimal, complete, and verifiable example 中显示您的现有代码
  • 你的html在哪里?它仅适用于引导程序吗?
  • 我已经按照你的意愿修改了我的问题@ObsidianAge
  • 我已经按照你的意愿修改了我的问题@CodingYoshi

标签: asp.net-mvc twitter-bootstrap templates twitter-bootstrap-3 bootstrap-4


【解决方案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,您可以自己查看。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-08-19
    • 1970-01-01
    • 2017-12-17
    • 2016-11-14
    • 1970-01-01
    • 2017-09-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多