如何更改 bootstrap 4 网格中的偏移大小？答案

【问题标题】：How to change the offset size in bootstrap 4 grids?如何更改 bootstrap 4 网格中的偏移大小？
【发布时间】：2020-05-28 19:00:25
【问题描述】：

我在 Angular 8 应用程序中使用 bootstrap 4。在我的主页中，我有两个大小为md-5 和md-6 的组件，我想使用offset-md-1 将它们分开。但是偏移量很大，我不想在我的组件之间有那么多空间。如何减小offset 的大小？ offset-md-0.5 会工作吗？除了使用 bootstrap offset 之外，您能提出任何更好的方法吗？这是我的代码：

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

【问题讨论】：

Bootstrap 标准有 12 列，如果一列偏移量太大，您可能需要将列数更改为 24。使用 Bootstrap LESS/SASS 的 AFAIK 您可以简单地更改 mixin 中的参数打电话，等等。

标签： html css bootstrap-4 frontend angular-ui-bootstrap

【解决方案1】：

使用ml-auto 而不是offset-md-1 它非常适合您。

试试这个代码：

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

我希望这对你来说是完美的。

注意：我不明白offset-md-1 的大小有多大？此类的默认 css 属性在引导程序中固定为 margin-left: 8.333333%;。您也可以使用此类，但条件是您不必对col-**-* 宽度进行任何更改。

谢谢...

【讨论】：

【解决方案2】：

bootstrap-4 中没有 *-xs-* 类。请改用col-12。 `col-xs-*` not working in Bootstrap 4

可以通过三种方式在列之间添加空间。

margin-x .col-*
padding-x.col-*
justify-content-between .row

边距非常棘手，因为它会影响总列的宽度之和。两列的宽度+margin-x不应超过.row的宽度。否则，列会中断。

md-screen 上两列的总宽度为91.667%。所以你有8.333%免费空间。你可以控制在哪里使用这个8.333%。

offset-md-1,mr-auto,ml-auto 和 justify-content-between 产生相同的结果：8.333% 两列之间的空格。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6  bg-primary">
        
    </div>
    <div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
        offset-md-1
    </div>
  </div>
</div>


<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 mr-auto bg-primary">
        mr-auto
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
        
    </div>
  </div>
</div>

<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 bg-primary">
        
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
        ml-auto
    </div>
  </div>
</div>



<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 bg-primary">
        justify-content-between
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
    justify-content-between
    </div>
  </div>
</div>

如果你想在它们之间有8.333% / 2 空间。你不能在 bootstrap-4 中做到这一点。所以你需要使用css。

@media (min-width: 768px) {
  .ml-md-0_5 {
    margin-left: calc((100% / 12) / 2)
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
  <div class="row">
    <div class="container1 col-12 col-md-6 bg-primary">
      
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
      ml-md-0_5
    </div>
  </div>
</div>

现在，两列的总宽度 + 边距为 95.833%。默认情况下，元素是左对齐的。因此，4.166% 在最后一列的右侧释放空间。如果您愿意，可以在任何列的 x 侧使用它。

如前所述，您也可以使用我更喜欢的padding-x，因为它不会影响列的总宽度。

【讨论】：