Есть ли возможность сделать 3 колонки на карте bootstrap отзывчивыми? - PullRequest
Новая
       5

Есть ли возможность сделать 3 колонки на карте bootstrap отзывчивыми?

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

В моем приложении angular 9 у меня есть карта bootstrap. В теле карты 

<div class="animated fadeIn" 
    style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;" 
    id="qgroup-div-g{{ei}}" 
    *ngFor="let g of this.stat?.MyQuestionGroup;let ei=index;">
    <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">
              <!-- <i class="fa fa-align-justify"></i> Combined All Table -->
              <div class="row" style="position: relative;">
                <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">      
                    <h5 style="text-align: left;">
                        {{g?.QuestionGroupName}} 
                        <button type="button" 
                                class="btn btn-success mr-1" 
                                style="position:absolute;right: 10px;top:5px;"  
                                (click)="isCollapsed = !isCollapsed"
                                [attr.aria-expanded]="!isCollapsed" 
                                attr.aria-controls="qgroup-collapse-wrapper-g{{ei}}">
                            <i class="fa fa-align-justify"></i>
                            </button>
                    </h5>
                </div>
              </div>    
            </div>

            <div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g{{ei}}">
                <div class="card-body" style="border: 1px solid red">                   

                <div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">                   

                    <!-- COLUMN #1 (ROW NUMBER COLUMN)  --> 
                    <div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
                        {{rnum + 1}}
                    </div>

                    <!-- COLUMN #2 ( TEXT COLUMN ) -->
                    <div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
                        <!-- Quality of the software application installed -->
                        {{q?.QuestionText}}
                    </div> 

                    <!-- COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT ) --> 
                    <div    style="border:1px solid blue;" 
                            id="qrow_pgr_{{rnum}}_g{{ei}}" 
                            *ngIf="q?.FeedbackTypeId==1" 
                            class="col-xs-auto">

                        <progress-display  id="pgr_{{q?.QuestionId}}"  
                                    value='{{this.roughValue}}' 
                                    maxProgress="100" 
                                    checkedcolor="red" 
                                    uncheckedcolor="black" 
                                    size="40px" 
                                    readonly="false" 
                                    (rate)="onRate($event,'pgr_', q?.QuestionId, q?.FeedbackTypeId )">
                        </progress-display>
                    </div>


                    <div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">

                        {{q?.DemoText}}
                    </div>  
                    <br>

                    <div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
                        <textarea id="txa_qrow_pgr_{{rnum}}_g{{ei}}" 
                                  rows="10" 
                                  cols="100" 
                                  *ngIf="q?.FeedbackTypeId==2"  
                                  class="col-md-12" 
                                  (input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
                                  ></textarea>
                    </div>
                    <!-- </div> -->

                </div>
                <!-- ./ The core of the Suervey Question and stars -->

                </div>
            </div>

        </div>
    </div>
    <!--/.col-->
  </div>
</div>

<div id="dvFeedbackSubmit" class="col-md-12" style="border:0px solid black;text-align:center; margin-left: 2%;margin-right: 2%;">
    <input type="button" id="btnSubmit"  value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>

я пытаюсь создать следующий макет на карте bootstrap: :

enter image description here

я отметил столбцы, которые я хотел бы отформатировать в макете со следующими комментариями: *

  1. COLUMN # 1 (СТОЛБАЯ КОЛОННА)
  2. КОЛОННА # 2 (ТЕКСТОВАЯ КОЛОННА)
  3. КОЛОННА # 3 (КОМПОНЕНТ ДИСПЛЕЯ БАР ПРОГРЕССА)

Вот извлечение тела карты разметка из приведенной выше полной разметки :: 

 <div class="card-body" style="border: 1px solid red"> 
                <div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">                   

                    <!-- COLUMN #1 (ROW NUMBER COLUMN)  --> 
                    <div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
                        {{rnum + 1}}
                    </div>

                    <!-- COLUMN #2 ( TEXT COLUMN ) -->
                    <div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
                        <!-- Quality of the software application installed -->
                        {{q?.QuestionText}}
                    </div> 

                    <!-- COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT ) --> 
                    <div    style="border:1px solid blue;" 
                            id="qrow_pgr_{{rnum}}_g{{ei}}" 
                            *ngIf="q?.FeedbackTypeId==1" 
                            class="col-xs-auto">

                        <progress-display  id="pgr_{{q?.QuestionId}}"  
                                    value='{{this.roughValue}}' 
                                    maxProgress="100" 
                                    checkedcolor="red" 
                                    uncheckedcolor="black" 
                                    size="40px" 
                                    readonly="false" 
                                    (rate)="onRate($event,'pgr_', q?.QuestionId, q?.FeedbackTypeId )">
                        </progress-display>
                    </div>
                </div>
</div>

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

updated 1. Как сделать следующее расширение div, чтобы оно соответствовало телу карты 

<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
Как сделать так, чтобы столбец «КОЛОННА № 3 (КОМПОНЕНТ ОТОБРАЖЕНИЯ БАРАБАНА ПРОГРЕССА)» расширился до оставшейся ширины

и div с <div class="row justify-content-md-center" должен реагировать, когда вся строка должна находиться на та же строка

Ответы [ 2 ]

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

Попробуйте вот так 

        <div class="card">
                <div class="card-body"><div class="row">
            <div class="col-sm-1"></div>


            <div class="col-sm-7"></div>


            <div class="col-sm-4"></div>
            </div></div>
              </div>



In mobile width:

    Try like this    

        <div class="card">
                <div class="card-body"><div class="row">
            <div class="col-1"></div>


            <div class="col-7"></div>


            <div class="col-4"></div>
            </div></div>
              </div>
0 голосов
/ 17 марта 2020

Возможно, я не совсем понимаю ... Но вы хотите, чтобы столбцы выпадали на меньших устройствах? 


<div class="col-1">


<div class="col-7">


<div class="col-4">

Вы можете просто добавить bootstrap классы столбцов для меньших точек останова

...