Javascript 反应：为什么我包装JSX的DIV突然变得很窄，不允许我的布局扩展？

我有一个网站运行了一年左右，没有任何问题。这是一个附属网站，我没有赚任何钱，所以我关闭了它。我从今天开始备份，整个布局被压缩成一列。我发现了这个问题，元素被包装在一个Div中，其宽度由浏览器设置。如果我在浏览器中修改HTML并删除div，所有内容看起来都是它应该的样子

当我转到我的代码时，发现div就是我必须将JSX代码包装在其中的div。我无法移除它。有人知道如何解决这个问题吗？该网站是（该网站是免费托管的，可能需要15秒才能加载），如果你在开发工具中查找“ThisDivIs狭窄”，你可以看到负责的div

中的代码是：

render() {
        const sortedArray = categoryArray.sort(function (a, b) {
            var textA = a.categoryName.toUpperCase();
            var textB = b.categoryName.toUpperCase();
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        });
        const productsListed = sortedArray.map(category => {
            return (
                    <Col xs={12} sm={4} md={4} lg={3} key={category.id}>
                        <Link onClick={this.goToTop.bind(this)} to={category.link}>
                            <div class="image-container">
                                <div className="full-width">
                                <Image className="images" onError={this.displayError.bind(this)} responsive src={category.image} alt={category.altTag} />
                                </div>
                                <div className="winners">
                                    <div className="placement">
                                        <div className="inner-container">
                                            <div className="category-text">{category.categoryName}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Link>
                    </Col>
            )
        });
        return (
            <div class="this-div-is-narrow">
                <MetaTags>
                    <title>The Quick Reviews</title>
                    <meta id="meta-description" name="description" content="We make your buying decisions quick and easy by displaying and rating popular products in each category" />
                </MetaTags>
                {productsListed}
            </div>
        )
    }

render（）{
const sortedArray=categoryArray.sort（函数（a，b）{
var textA=a.categoryName.toUpperCase（）；
var textB=b.categoryName.toUpperCase（）；
返回（textAtextB）？1:0；
});
const productsListed=sortedArray.map（类别=>{
返回(
{category.categoryName}
)
});
返回(
快速评论
{productsListed}
)
}

您必须将

行

类添加到

此分区很窄

像这样：

<div class="row">
    <MetaTags>
        <title>The Quick Reviews</title>
        <meta id="meta-description" name="description" content="We make your buying decisions quick and easy by displaying and rating popular products in each category" />
    </MetaTags>
    {productsListed}
</div>

快速评论
{productsListed}