перенос столбцов сетки после обновления до bootstrap 4 - PullRequest
Новая
       3

перенос столбцов сетки после обновления до bootstrap 4

0 голосов
/ 31 января 2020

У меня есть табличный экран, созданный с использованием классов сетки bootstrap. Строки тела которого динамически заполняются javascript. Таблица скрыта или отображается в зависимости от состояния приложения. У меня есть div с идентификатором, который содержит строку для столбцов заголовка и другой div с другим идентификатором для хранения строк тела, как это: 

        <div id="myDynamicList" style="display:none;">
            <div class="row" id="myHeaderRow">
                <div class="col-sm-4 tabledHeader">Service Id</div>
                <div class="col-sm-4 tabledHeader">Service Type</div>
                <div class="col-sm-1 tabledHeader">Synchronised</div>
                <div class="col-sm-1 tabledHeader">Singleton</div>
                <div class="col-sm-2 tabledHeader"></div>
            </div>
            <div id="myListOutput"></div>
        </div>

В bootstrap 3.5 это работает нормально. В 4 каждый столбец находится на новой строке, когда они должны быть в строке. Если я удаляю div-обертки, такие как myListOutput и myDynamicList, компоновка будет корректной. Cols бок о бок заполняет строку comlete и каждую строку в новой строке.

Мне нужны div-элементы для переноса, чтобы получить хук в DOM для добавления моих дочерних элементов, но это приводит к созданию макета

Как это сделать в bootstrap 4.

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

В конце концов, я заработал на этом работу, добавив еще один набор классов строк и столбцов, как этот ... 

   <div id="myDynamicList" style="display:none;" class="row">
      <div class="col-sm-12">
          <div class="row">
             <div class="col-sm-4 tabledHeader">Service Id</div>
             <div class="col-sm-4 tabledHeader">Service Type</div>
             <div class="col-sm-1 tabledHeader">Synchronised</div>
             <div class="col-sm-1 tabledHeader">Singleton</div>
             <div class="col-sm-2 tabledHeader"></div>
           </div>
      </div>
   </div>
   <div class="row" id="listBody">
      <div class="col-sm-12" id="myListOutput"></div>
   </div>
0 голосов
/ 31 января 2020

почему бы вам не обернуть каждую строку тела таблицы (внутри div с id = "myListOutput") div, у которого есть класс 'row' и установить flex-wrap в nowrap: 

<div id="myDynamicList">
    <div class="row flex-nowrap" id="myHeaderRow">
        <div class="col-4 tabledHeader">Service Id</div>
        <div class="col-4 tabledHeader">Service Type</div>
        <div class="col-2 tabledHeader">Synchronised</div>
        <div class="col-1 tabledHeader">Singleton</div>
        <div class="col-1 tabledHeader"></div>
    </div>
    <div id="myListOutput">
        <div class="row flex-nowrap">
            <div class="col-4"> first </div>
            <div class="col-4"> second </div>
            <div class="col-2"> third </div>
            <div class="col-1"> fourth </div>
            <div class="col-1"> fifth </div>
        </div>

        <div class="row flex-nowrap">
            ...
        </div>
        ...
    </div>
</div>
...