Question

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

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

我的布局文件：

<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类。有人可以指导我如何处理这种情况。

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

生成的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那样将类与container-fluid body-content混合使用，尤其是当您的其他类（body-content）具有填充或边距样式时。这是因为bootstrap使用container，container-fluid，row和col-x-x来提供正确的边距和填充（container-fluid默认情况下应该为您提供15px填充）。

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

Answer 2

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

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

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

2 个答案: