代码之家  ›  专栏  ›  技术社区  ›  Mike

反应:为什么我包装JSX的DIV突然变得很窄,不允许我的布局扩展?

  •  1
  • Mike  · 技术社区  · 8 年前

    我有一个网站,运行了一年左右,没有任何问题。这是一个附属网站,我没有赚钱,所以我把它关掉了。我从今天开始备份,整个布局被压缩到一列中。我发现了这个问题,元素被包装在一个Div中,宽度由浏览器设置。如果我在浏览器中修改HTML并删除div,那么一切看起来都是正常的。

    当我转到我的代码时,发现div就是我必须将JSX代码包装进去的div。我无法删除它。有人知道如何解决这个问题吗?该网站是 http://www.thequickreviews.com/ (该站点是免费托管的,可能需要15秒才能加载),如果您在开发工具中查找“这个div很窄”,您可以看到负责的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>
            )
        }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Varinder    8 年前

    您必须添加 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>
    
    推荐文章