css - 在 MVC View 中应用 Bootstrap css

标签 css asp.net-mvc twitter-bootstrap

我正在使用 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>

但我没有得到我想要的输出, enter image description here

我用过这种格式 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:

我将 bootstap.css 放在 cite.css 之前,然后我在这些框之间留有空间,并且框大小在该 div 标记内 但是整个页面的字体非常非常小。我看不懂那些文字。

最佳答案

如果你使用 Bootstrap ,你应该像这样使用它:

不要在@using (Html.BeginForm(new {}))中使用form-horizo​​ntal类

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

关于css - 在 MVC View 中应用 Bootstrap css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27473441/

相关文章:

javascript - Bootstrap 输入组文本没有按钮占用一半空间

css - 未知伪元素或伪类 :hover

php - 将用户名/密码传递给服务器 url

html - CSS 动画没有正确填充垂直高度?

c# - ASP.NET MVC : 'Extend' Html. TextBox 有条件地具有 CSS 值?

c# - Monorail 无法读取从 jQuery 接收到的 JSON(对象列表)数据

asp.net-mvc - 为什么 IIS/ASP.Net/MVC3 将 max-age 设置为 7200?

javascript - bootstrap.js Accordion 折叠/展开

javascript - Angularjs - 将指令中的值绑定(bind)到 ng-show/hide 文档中的任何位置

css 3 div定位,其中一个溢出: scroll