Question

引导程序行的public class ApplicationOAuthProvider : OAuthAuthorizationServerProvider { [...] public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) { var userManager = context.OwinContext.GetUserManager<ApplicationUserManager>(); ApplicationUser user = await userManager.FindAsync(context.UserName, context.Password); if (user == null) { context.SetError("invalid_grant", "The user name or password is incorrect."); return; } ClaimsIdentity identity = await userManager.CreateIdentityAsync( user, DefaultAuthenticationTypes.ExternalBearer); AuthenticationProperties properties = CreateProperties(user.UserName); AuthenticationTicket ticket = new AuthenticationTicket(identity, properties); context.Validated(ticket); } [...] }（左和右）为margin。

据我所知，这主要有两个原因：

-15px的{{1}}（左右）为.container
padding具有15px的装订线。

因此，为了避免第一列（左侧）上的装订线创建的空白和最后一列（右侧）上的最后一列的装订线创建的空间，该行具有{{1} col-*的}（左右）。

我只是想知道，为什么不删除容器的15px并将行的填充/边距设置为0？

它将产生相同的效果，第一列与margin的距离为-15px，最后一列的距离相同。

我缺少什么？

我已经检查过：Negative left and right margin of .row class in Bootstrap和Bootstrap's .row margin-left: -15px - why is it outdented (from the docs)，但我看不出有任何理由使用负边距而不是0 padding。

Answer 1

这是因为容器用于包含任何内容，而不仅仅是网格行和列。如果没有在容器上填充，内容将被迫靠在布局的边缘，并且不会与其他内容对齐...

<div class="container px-0">
  <p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
  <div class="row m-0">
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
         grid content
      </div>
  </div>
</div>

https://www.codeply.com/go/23PqWB19ol

除了网格内容Bootstrap examples

以外，您还可以看到container的几个示例

相关：Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?

Answer 2

这是您简单易懂的答案

转到您要给其负余量的班级，然后使用此方法。

边距顶部示例

mt-n3

保证金底部的示例

mb-n2

Answer 3

行上的 Bootstrap 负边距非常容易 转到您的 Bootstrap 类并使用边距编号连接 'n' 例如

mt-2 //should change to mt-n3

在行上引导负边距

3 个答案: