如何使用 react-bootstrap 正确呈现内容？答案

【问题标题】：how to render content with react-bootstrap correctly?如何使用 react-bootstrap 正确呈现内容？
【发布时间】：2020-02-19 03:02:20
【问题描述】：

下面有我的 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>

结果可见here

【问题讨论】：

标签： html reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

col-md-12 内的所有divs 都应该是span。一个 div 创建一个换行符，一个 span 将尝试保持在同一行。

【讨论】：

【解决方案2】：

<div class="col-md-12"> 的 div 应该是你所在行的位置。

尝试替换

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

与

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

在另一列中包含多个列将无法正常工作，除非这些列包含在 <div class="row"> 中

【讨论】：

【解决方案3】：

在你的列 div 上尝试 class col-sm-3，JS Fiddle 预览区域很窄......列的父 div 也需要 class "row"

【讨论】：

只是好奇你有没有尝试过你的建议？我试过把 sm、xs 和 md 加在一起，结果还是一样。
糟糕，我还在列的父 div 中添加了“行”类