无法在 MVC 中使用 bootstrap css 设置适当的边距 [英] Cant set proper margin with bootstrap css in MVC

问题描述

我正在开发 MVC 应用程序.带靴带.

我正在尝试为名字字段设置边距.

请检查下图.

现在的问题是验证消息没有正确显示.我想在名字下方显示验证消息.如果我使用的边距超过 20 像素，则文本框位于名字的标签下方.

如何做到这一点?

下面是代码.

<div class="editor-label span3">@Html.LabelFor(model => model.FirstName, "名字")
<div class="editor-field span6 InputBoxMargin" style="width:290px; margin-right:20px;">@Html.TextBox("FirstName",null, new {style = "width:210px;" })@Html.ValidationMessageFor(model => model.FirstName,"你不能把它留空.")

解决方案

您是否考虑过使用 Bootstrap 表单?这里有一个非常好的拖放构建器.使用表单意味着为您处理页边距.

类似的东西

<div class="control-group">@Html.LabelFor(model => model.FirstName, "名字")<div class="控件">@Html.TextBox("FirstName",null, new {style = "width:210px;" })<p class="help-block">@Html.ValidationMessageFor(model => model.FirstName,"你不能把它留空.")</p>

对于拖放链接 -

• 通过将组件拖放到画布上来构建表单
• 点击渲染"标签
• 复制/粘贴 HTML
• 等等！

可能应该花一些时间参考 Github/docs 站点以了解它的工作原理/方式.

I am developing MVC app. with boot strap.

I am trying to put margin for the first name field.

Please check the below image.

Now the problem is Validation message doesn't appear properly. I want to show the validation message below the first name. If I used margin more than 20 px then text box come below the label of firstname.

How to do this ?

Below is the code.

<div class="span6">     
  <div class="editor-label span3">
        @Html.LabelFor(model => model.FirstName, "First Name")
  </div>
  <div class="editor-field span6 InputBoxMargin" style="width:290px; margin-right:20px;">
   @Html.TextBox("FirstName",null, new {style = "width:210px;" })
   @Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
  </div>
 </div>

解决方案

Have you considered using Bootstrap forms? There is a really nice drag and drop builder here. Using forms means the margins are taken care of for you.

Something like

<div class="form-horizontal">
    <div class="control-group">
        @Html.LabelFor(model => model.FirstName, "First Name")
        <div class="controls">
            @Html.TextBox("FirstName",null, new {style = "width:210px;" })
            <p class="help-block">
                @Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
            </p>
        </div>
    </div>
</div>

Edit: For the drag and drop link -

• Build your form by dragging/dropping components onto the canvas
• click the 'rendered' tab
• copy/paste the HTML
• et voila!

Should probably take sometime to refer to the Github/docs site to understand why/how it works too.

这篇关于无法在 MVC 中使用 bootstrap css 设置适当的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！