如何使用 react-bootstrap 正確呈現內容？

Question

我在下面有我的 html 塊，我期待這樣的結果：

第 1 行

1 項 1 項 1 項 1 項

第 2 行

1 項 1 項 1 項 1 項

相反，它們出於某種原因相互疊加。

我的 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 應該是您所在行的位置。

嘗試更換

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

和

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

除非這些列包含在<div class="row">中，否則在另一列中包含多個列將無法正常工作

Answer 2

在您的列 div 上嘗試 class col-sm-3，JS Fiddle 預覽區域非常窄......列的父 div 也需要 class “行”

Answer 3

col-md-12中的所有div都應該是span 。 一個 div 創建一個換行符，一個 span 將嘗試保持在同一行。