Bootstrap - избегайте переноса небольших элементов управления в мобильном представлении

Question

Рассмотрим следующий раздел угловой шаблон 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

Спасибо.

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>

Answer 2

Это то, что вам нужно для устройств размером md:

• разделите строки на col-4 для метки
• разделите строки на col-6 для ввода(или меньше)
• стиль значка через position:absolute, чтобы быть справа

Рабочий фрагмент ниже:

@media screen AND (max-width:768px) {
  .custom-icon {
    position: absolute;
    right: 20px;
    top: -10px
  }
}

<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/4.7.0/css/font-awesome.min.css">


<div class='container-fluid'>
  <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-4 col-md-3">
              <label for="from">From:</label>
            </div>
            <div class="col-6 col-md-2">
              <input class="form-control" type="text" formControlName="from">
            </div>
            <div class="col-4 col-md-2">
              <label for="to">To:</label>
            </div>
            <div class="col-6 col-md-2 mb-2">
              <input class="form-control" type="text" formControlName="to">
            </div>
            <div class="col-1 col-md-1 custom-icon">
              <i class="fa fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>