Как правильно отображать содержимое с помощью реакции-начальной загрузки?

Question

У меня есть мой html чанк ниже, и я ожидаю результат, подобный этому:

row1

1item 1item 1item 1item

row2

1ite 1item 1item 1item

Вместо этого они по какой-то причине складываются друг в друга.

Мой HTML:

<div class="container-fluid">
    <div id="main" class="staticMain clearfix">      
            <div class="row">
                <div class="col-md-12">
                    <h3>Table 1</h3>
                    <div class="topMargin row">
                        <div class="col-md-12">
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="topMargin row">
                        <div class="col-md-12">
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

результат можно увидеть здесь

Answer 1

Ваши деления <div class="col-md-12"> должны быть там, где у вас есть строка.

Попробуйте заменить

<div class="topMargin row">
    <div class="col-md-12">

на

<div class="topMargin">
    <div class="row">

Наличие нескольких столбцов внутри другого столбцане будет работать правильно, если эти столбцы не будут заключены в <div class="row">

Answer 2

Все div внутри col-md-12 должны быть span. Div создает новую строку, span будет пытаться остаться на той же строке.

Answer 3

Попробуйте использовать класс col-sm-3 в своих столбцах div, область предварительного просмотра JS Fiddle очень узкая ... также родительскому div столбцов нужен класс "row"