bootstrap-4 - 如何在 Angular 材料 8 中连续平均分割两个 mat-form-fields？

Question

如何在 Angular 材料 8 中连续平均分割两个 mat-form-fields？

<div class="row">
    <div class="col-md-6 offset-md-3 col-xs-12" style="width: 50%">

        <mat-form-field>
            <input matInput placeholder="Mode" readonly>
        </mat-form-field>

    </div>
    <div class="col-md-6 offset-md-3 col-xs-12" style="width: 50%">
        <mat-form-field>
            <input matInput placeholder="Type" readonly>
        </mat-form-field>
    </div>
</div>

标签： bootstrap-4angular-material

Answer 1

col-md-6不使用offset-md-3（更多关于offset）。style="width: 50%"是不必要的。另请注意，这仅适用于 ≥768px（源）的视口，并且col-xs-*在 bootstrap 4 中是col-*.

说明：由于每个引导行有 12 个单元格，而您的 div 需要 9 个单元格（偏移量为 6 + 3），因此第二个 div 移动到下一行。删除offset-md-3后，两个 div 都在同一行中。

请参阅以下演示：（
我必须添加col-6 offset-3，col-6因为代码段输出对于 来说太小了col-md-*）

.red{
  background: red;
}

.yellow{
  background: yellow;
}

.row {
  height: 100px;
  width: 400px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12">
Current situation:

<div class="row border">
  <div class="col-md-6 offset-md-3 col-6 offset-3 red"></div>
  <div class="col-md-6 offset-md-3 col-6 offset-3 yellow"></div>
</div>

Sub-divs in one row:

<div class="row border">
  <div class="col-md-6 col-6 red"></div>
  <div class="col-md-6 col-6 yellow"></div>
</div>

Space between:

<div class="row border">
  <div class="col-5 red"></div>
  <div class="col-5 offset-2 yellow"></div>
</div>

Space around:

<div class="row border justify-content-around">
  <div class="col-5 red"></div>
  <div class="col-5 yellow"></div>
</div>
</div>