如何使用 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 将尝试保持在同一行。