Как установить столбец div, и после сохранения его не следует менять? - PullRequest
Новая
       0

Как установить столбец div, и после сохранения его не следует менять?

1 голос
/ 19 марта 2020

question

На изображении выше, когда я сохраняю свои карты, он помещается в один столбец, мне нужно это в отдельных столбцах, потому что данные поступают из бэкэнда. Я использую angular 6, HTML CSS, а бэкэнд - java. 

<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 px-0">
    <div class="col-sm-12 pad-15" *ngFor="let project of projects">
      <h4 class="user1" [style.background]="project.configurationStatus.statusColor">
        {{project.configurationStatus.statusName}}
        <a href="javascript:void(0)" class="float-right txt-white" *ngIf="toggleView" (click)="deleteCard(project.configurationStatus.id)">
          <i class="fa fa-close"></i>
        </a>
      </h4>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">{{project.company.name}}</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">{{project.title}}</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">{{project.city}}</p>
            <p class="country-name">{{project.country}}</p>
          </div>
          <div class="col-sm-12 pl-0" *ngIf="project.dueDates">
            <!-- <ng-container *ngIf="project.fetchMileStone">
              <i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>
        </ng-container> -->

        <ng-container>
          <span *ngFor="let milestoneDates of project.dueDates">
              <span class="date-1" *ngIf="milestoneDates.milestoneStatus == true" [ngStyle]="{'background-color':milestoneDates.expirationColor}">
                  <span *ngIf="milestoneDates.milestoneStatus == true">{{milestoneDates.date| date:derivedSettings.dateFormatLine}}</span>
              </span>
          </span>
      </ng-container>

          <div class="col-sm-12 pl-0">
              <ng-container *ngIf="!project.fetchMileStone">
              <span  *ngFor="let milestoneList of project.dueDates">
                  <span class="date-4" *ngIf="milestoneList.milestoneStatus == true">{{milestoneList.type}}</span> 
              </span>
              </ng-container>
          </div>
          </div>
          <a href="javascript:void(0)" class="fa-icon" (click)="goToScheduler(project.id,project.isBookingCreated)"><i class="fa fa-calendar-o"></i></a>
          <span class="badge" *ngIf="project.pendingBookings!=0">{{project.pendingBookings}}</span>
          <a class="goBtn" href="javascript:void(0)" (click)="goToDetails(project.id)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
<!--     <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 user-define-card-1 pad-15">
      <h4 class="user2">
        Shoot prep
      </h4>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 user-define-card-2 pad-15">
      <h4 class="user3">
        Shoot
      </h4>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 user-define-card-3 pad-15">
      <h4 class="user4">
        RC
      </h4>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-box">
          <p class="compnay-name">NBC</p>
          <div class="col-lg-6 col-md-12 col-sm-6 col-xl-12 pl-0">
            <h4 class="title4">How to succeed to deliver on time</h4>
          </div>
          <div class="merge-text col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 p-tag">
            <p class="City-name">West Hollywood</p>
            <p class="country-name">United States</p>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-1" style="background-color: red;">
              15/01/20
            </span>
            <span class="date-1" style="background-color: orange;">
              25/02/20
            </span>
          </div>
          <div class="col-sm-12 pl-0">
            <span class="date-4">PostProd</span>
            <span class="date-4">Delivery</span>
          </div>
          <a class="fa-icon" href="javascript:void(0)">
            <i class="fa fa-calendar-o"></i>
          </a>
          <span class="badge">2</span>
          <a class="goBtn" href="javascript:void(0)">
            <i class="fa fa-chevron-right"></i>
          </a>
        </div>
      </div>
    </div> -->
  </div>

  1. Я прикрепил свой код к этому. Мне нужна только одна карточка с одинаковым названием в одном столбце и другим заголовком с картой в разных столбцах. если я сохраню это, оно перейдет в один столбец.

1 Ответ

0 голосов
/ 19 марта 2020

Я думаю, что самый простой способ - использовать Flex .

У вас есть много вариантов:

  1. Вы можете использовать flex и создать контейнерный класс (рекомендуется): 
.row-container {
    display:flex;
    flex-flow: row wrap;
}

Затем поместите div ваших ящиков в этот родительский div. Затем они ставят в ряд вместо столбцов.

Используйте bootstrap ( Документация )

Вы можете использовать bootstrap и использовать определенный для него класс "row". Класс строк bootstrap тоже использует flex.

Использование CSS Сетка ( Документация ) Использование display-inline и float
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...