javascript - react : Why is the DIV that I wrap my JSX in suddenly very narrow and not allowing my layout to expand?

Question

我的网站运行了一年左右，没有任何问题。这是一个附属网站，我没有赚到钱，所以我把它关掉了。我今天重新启动它，整个布局被压缩到一个列中。我发现了问题，元素被包裹在一个宽度由浏览器设置的 Div 中。如果我在浏览器中修改 HTML 并删除 div，一切看起来都如预期的那样。

当我转到我的代码时，发现 div 是我必须将我的 JSX 代码包装在其中的 div。我无法删除它。有谁知道如何解决这个问题？网址是http://www.thequickreviews.com/ (该站点是免费托管的，可能需要 15 秒才能加载)，如果您在开发工具中查找“this-div-is-narrow”，您可以看到负责的 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>
        )
    }

Answer 1

您必须将 row 类添加到 this-div-is-narrow

像这样:

<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>