【发布时间】: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