Question

我正在使用React-Bootstrap的Grid布局功能，并努力根据屏幕的宽度/ div的最佳位置来移动div。

这是此的React-Bootstrap代码...

<Row>
    <Col>
        <img src={rocketslogo.url}/>
    </Col>
    <Col xs={8}>
        <div>
            {teamSelect}
        </div>
        <div>
            {yearsSelect}
        </div>
        <div>
            {teamStatsAndInfo}
        </div>
    </Col>
    <Col xs={12}>
        {teamStatsAndInfo}
    </Col>
</Row>

我当前正在显示teamStatsAndInfo两次，以显示想要的效果，即-当宽度较宽时，我希望将teamStatsAndInfo div放在下面< / em>选择。但是，当宽度更窄时，我希望将teamStatsAndInfo div放置在徽标和选择下方。

...由于团队的徽标变小而选择项保持不变，因此将团队的统计信息和信息作为自己的列移动到徽标和选择项下方是有意义的，但是我不确定如何有条件地做这个。

我不擅长以移动为先的架构，并且正在努力构建响应式布局。我不确定我是否违反了许多最佳实践规则（使用相同大小的选择缩小徽标，如何在Cols中使用等）。任何想法或帮助，将不胜感激，谢谢！

Answer 1

-从适合移动设备的网站开始的第一步是为所有差异屏幕尺寸提供线框。

-在您的代码中，您已经为数据列分配了Col xs={8}。您还需要设置其他屏幕尺寸的宽度。例如：md-中型屏幕（≥992px），sm小屏幕（≥768px）等。此外，您还可以使用xsHidden（在超小型设备中隐藏列）隐藏小屏幕中的某些字段

有关列大小的更多详细信息，请参阅文档

https://react-bootstrap.github.io/layout/grid/

感谢希望能对您有所帮助。

使用React-Bootstrap的网格布局在列中重新放置div

1 个答案: