使用kendo-react-ui布局组件实现Bootstrap4响应式布局遇问题求助

It looks like the issue here is that you're using Bootstrap-style class names (like col-xs-12, row) but Kendo React UI has its own dedicated layout components that work seamlessly with the Kendo Material theme—those Bootstrap classes won't apply the correct grid styles out of the box because the Kendo theme doesn't include Bootstrap's grid system.

Here's how to fix this using Kendo's official Layout components:

Step 1: Ensure you have the Kendo Layout package installed #

If you haven't already, install the layout components package:

npm install @progress/kendo-react-layout

Step 2: Rewrite your code using Kendo's Container, Row, and Col components #

Replace your div-based Bootstrap-style markup with Kendo's components, which use props for responsive breakpoints instead of class names:

import { Container, Row, Col } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';

// ... your component code
<Container className="cont">
  <Row>
    <Col xs={12} sm={6} md={6}>
      <Button primary={true}>Add User</Button>
    </Col>
  </Row>
</Container>

Key Notes: #

• Container: Acts like Bootstrap's .container—it centers content and applies max-width constraints based on screen size. Use the fluid prop (<Container fluid />) if you want full-width like .container-fluid.
• Row: Handles the flex layout for columns, similar to Bootstrap's .row.
• Col: Uses props like xs, sm, md to define column width at each breakpoint (just like Bootstrap's col-xs-12, etc.). The values correspond to the number of columns out of 12 (so sm={6} means 50% width on small screens and up).

Why your original code didn't work: #

Kendo's Material theme doesn't include the Bootstrap grid styles, so classes like col-sm-6 don't have any effect. Your div was just a block element taking full width by default.

If you absolutely need to use Bootstrap classes alongside Kendo, you'd have to include Bootstrap's CSS in your project—but be warned that this can cause style conflicts with the Kendo Material theme, so it's generally not recommended.

内容的提问来源于stack exchange，提问作者Ashy Ashcsi