html - Bootstrap - 避免在移动视图中包装小控件

Question

考虑以下 Angular HTML 模板部分：

<div class="row" [formGroup]="saveForm">
  <label for="sections" class="col-md-3 col-form-label">Sections:</label>

  <div class="col-md-9">
      <a class="add-link" (click)="addSection()">Add Section</a>

      <div class="mt-2 mb-2" formArrayName="sections">
        <div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
          <div class="row mb-2">
            <div class="col-md-3">
              <label for="from">From:</label>
            </div>
            <div class="col-md-2">
              <input class="form-control" type="text" formControlName="from">
            </div>
            <div class="col-md-2">
              <label for="to">To:</label>
            </div>
            <div class="col-md-2 mb-2">
              <input class="form-control" type="text" formControlName="to">
            </div>
            <div class="col-md-1 custom-icon">
              <i class="fas fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
            </div>
          </div>
        </div>
      </div>

    </div>

</div>

这呈现如下：

现在，如果我在浏览器中转到移动视图，它看起来像这样：

两个输入都将限制为不超过 4 位，所以我不需要它们那么大。理想情况下，我希望将两个标签及其输入放在同一行，并在其下方带有删除图标（老实说，我不确定如何处理 UX）。如果这不可能，至少将每个标签与其输入放在同一行上。

我认为最好是以下内容：

如何在不破坏完整桌面视图的情况下完成此操作？

我正在使用 Bootstrap 4.3.1

谢谢你。

标签： htmlbootstrap-4

Answer 1

您无需任何自定义样式表即可实现此目的。这都是关于引导类的。

我只是将输入和标签包装在单独的 div 中，并在单独的 div 中删除图标。

请看下面的片段。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

<div class="row" [formGroup]="saveForm">
  <label for="sections" class="col-md-3 col-form-label">Sections:</label>

  <div class="col-md-9">
      <a class="add-link" (click)="addSection()">Add Section</a>

      <div class="mt-2 mb-2" formArrayName="sections">
        <div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
          <div class="row mb-2 mb-sm-0">

            <div class="col-10">
                <div class="row">
                     <div class="col-6 col-sm-3 mb-2 mb-sm-0">
              <label for="from">From:</label>
            </div>
            <div class="col-6 col-sm-3 mb-2 mb-sm-0">
              <input class="form-control" type="text" formControlName="from">
            </div>
            <div class="col-6 col-sm-3">
              <label for="to">To:</label>
            </div>
            <div class="col-6 col-sm-3">
              <input class="form-control" type="text" formControlName="to">
            </div>
                </div>
            </div>
            <div class="col-2 d-flex align-items-center">
                <div class=" custom-icon">
              <i class="fas fa-minus-circle fa-lg clickable text-danger" (click)="deleteRow(i)"></i>
            </div>
            </div>
           
          </div>
        </div>
      </div>

    </div>

</div>