在 Bootstrap 中使用 Container-Fluid 时如何处理左填充/边距

Question

我是 Web 开发的初学者，在我的 ASP.Net MVC 5 项目中被困在一个地方。

在现代网站中，大多数情况下，Container-Fluid 用于在查看主页时利用浏览器的全宽。但是现在的问题是，即使我去注册表格，左边也没有填充。基本上，我想要主页流畅，但是当我去注册甚至登录页面时，我希望有一些填充。

我的布局文件：

<div class="container-fluid body-content">
        @RenderBody()
</div>

注册页面查看：

    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <div class="form-group">
                @Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
                </div>
            </div>
        <div class="form-group">
            @Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
            </div>
        </div>     
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>        
    }

P.S：我可以对一些填充进行硬编码，但由于我对响应式网页设计不太擅长，所以我想使用 内置 Twitter 类。有人可以指导我如何处理这种情况。

1. Register 文字完全触及浏览器左侧面板。
2. 当我挤压浏览器时，所有表单域都会触及浏览器面板。

生成的 HTML：

<div class="container-fluid body-content">
<h2>Register.</h2>
    <div class="form-group">
        <label class="col-md-2 control-label" for="FirstName">FirstName</label>
        <div class="col-md-8">
            <input class="form-control" data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="LastName">LastName</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The LastName field is required." id="LastName" name="LastName" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Password">Password</label>
        <div class="col-md-10">
            <input class="form-control">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register">
        </div>
    </div>
</div>

请指导我如何优雅地处理这个问题。因为我会 在所有页面中都面临这个左填充问题。

Answer 1

要正确使用引导网格，您应该使用来自 https://getbootstrap.com/docs/3.3/css/#grid 的正确类

这应该会产生如下代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      @RenderBody()
    </div>
  </div>
</div>

您似乎缺少一个带有 row 类的 div。此外，您还缺少一些表单元素（例如<form class="form-horizontal">）。检查https://getbootstrap.com/docs/3.3/css/#forms-horizontal

您不应像使用 container-fluid body-content 那样将类与 container-fluid 混合使用，尤其是当您的附加类 (body-content) 具有填充或边距样式时。这是因为引导程序使用container、container-fluid、row 和col-x-x 来提供正确的边距和内边距（container-fluid 应该默认为您提供 15 像素的内边距）。

您可以使用您的浏览器开发工具来检查不同的 div，以查看哪些类正在应用哪些样式。可能还值得检查一下是否有任何其他样式覆盖引导程序。

Answer 2

如果您从模板生成项目，则Site.css 中有此选择器。您可能已将其删除，但您可以重新添加。

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}