在MVC视图中应用Bootstrap css

发布时间：2020-12-17 21:25:56 所属栏目：安全来源：网络整理

导读：我正在使用Bootstrap css 观点： div class="container" @using (Html.BeginForm(new { @class="form-horizontal"})){ @Html.ValidationSummary(true) div class="form-group" @Html.LabelFor(model = model.Rank_name,new { @class = "control-label col-sm

我正在使用Bootstrap css

观点：

<div class="container">
    @using (Html.BeginForm(new { @class="form-horizontal"}))
{
    @Html.ValidationSummary(true)



   <div class="form-group">
       @Html.LabelFor(model => model.Rank_name,new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
            @Html.TextBoxFor(model => model.Rank_name,new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Rank_name)
    </div>
  </div>

   <div class="form-group">
       @Html.LabelFor(model => model.rank_code,new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
            @Html.TextBoxFor(model => model.rank_code,new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.rank_code)
    </div>
  </div>
   <div class="form-group">
       @Html.LabelFor(model => model.Target_amount,new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
            @Html.TextBoxFor(model => model.Target_amount,new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Target_amount)
    </div>
  </div>
        <div class="form-group">        
          <div class="col-sm-offset-2 col-sm-10">
              <input type="submit" value="Create" class="btn btn-default" />

          </div>
        </div>


}
    </div>

但我没有得到我想要的输出,

我用过这种格式
Horizontal form

但是这些盒子之间没有空间,盒子的尺寸太长了.我的意思是格式不好.我该怎么办？

编辑：
和我的布局：

<head>
 @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

        <script src="~/Scripts/bootstrap.min.js"></script>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
 </head>

编辑2：

我在cite.css之前放了bootstap.css然后我在这些盒子之间留出了空间,盒子大小在div标签内
但是整个页面的字体非常小.我无法读取那些文字.

解决方法

如果你使用bootstrap,你应该像这样使用它：

不要在@using中使用表单水平类(Html.BeginForm(new {}))

<div class="panel-body">
  <div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.Rank_name,new { @class = "control-label col-sm-2" })
        <div class="col-sm-7">
            @Html.TextBoxFor(model => model.Rank_name,new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Rank_name)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.rank_code,new { @class = "control-label col-sm-2" })
        <div class="col-sm-7">
            @Html.TextBoxFor(model => model.rank_code,new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.rank_code)
        </div>
    </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!