css - React Semantic UI - 步骤组件未在卡片上正确显示

Question

我正在为 React 可视化组件使用语义 UI。显示卡片设计中包含的步骤组件存在问题。虽然，我在下面显示的代码中将 Card 组件设置为流动的。

<Card fluid raised>

通过桌面查看时，它会溢出到卡的外部，如下所示：

但是，通过手机查看时效果很好。它在 Card 组件中垂直堆叠，如下所示：

我的代码如下所示。

// Confirmation.jsx
import React, { Component } from 'react';
import { Label, Header, Card, Form, Button, Container, Icon, Step } from 'semantic-ui-react';




class Confirmation extends Component{
    saveAndContinue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    }

    back  = (e) => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        const {values: {  companyName, phoneno, email, subscription, shopregno, gstin, ownername, owneremail, ownerphone, customerservice, address, position  }} = this.props;

        return(


            <Container>
              <Header as='h2' icon textalign='center'>
                              <Icon name='users' circular />
                              <Header.Content>REGISTRATION</Header.Content>
                </Header>
            <Card.Group>
             <Card fluid raised>
               <Card.Content>
                  <Card.Header>
                  <Step.Group>
                    <Step completed>
                      <Icon name='user' />
                      <Step.Content>
                        <Step.Title>Customer Details</Step.Title>
                        <Step.Description>Enter the customer details</Step.Description>
                      </Step.Content>
                    </Step>

                      <Step completed>
                      <Icon name='map marker alternate' />
                      <Step.Content>
                        <Step.Title>Map Details</Step.Title>
                        <Step.Description>Enter Location information</Step.Description>
                      </Step.Content>
                    </Step>


                    <Step completed>
                      <Icon name='book' />
                      <Step.Content>
                        <Step.Title>Category Details</Step.Title>
                        <Step.Description>Enter Category information</Step.Description>
                      </Step.Content>
                    </Step>

                    <Step completed>
                      <Icon name='servicestack' />
                      <Step.Content>
                        <Step.Title>Service Details</Step.Title>
                        <Step.Description>Enter Service information</Step.Description>
                      </Step.Content>
                    </Step>

                    <Step completed>
                      <Icon name='address card' />
                      <Step.Content>
                        <Step.Title>Owner Details</Step.Title>
                       <Step.Description>Enter Owner information</Step.Description>

                      </Step.Content>
                    </Step>

                   <Step active>
                       <Icon name='info' />
                      <Step.Content>
                        <Step.Title>Confirm Registration</Step.Title>
                        <Step.Description>Finalize & Confirm</Step.Description>

                      </Step.Content>
                    </Step>

                  </Step.Group>

                  </Card.Header>
               </Card.Content>





             <Card.Content extra>

                <Button secondary onClick={this.back}>Back</Button>
                <Button primary onClick={this.saveAndContinue}>Save And Continue </Button>
             </Card.Content>



         </Card>
       </Card.Group>





    </Container>



        )
    }
}

export default Confirmation;

我尝试了 Jake 建议的一种方法，它在 Step.Group 中添加了一个滚动条，如下所示：

不是一个理想的解决方案，因为滚动条不会自动移动到活动步骤。

任何帮助将不胜感激，以解决此错误。从语义 UI 的文档中，我了解到卡片组件有一个宽度预设。如何通过覆盖来修改这个预设宽度？

标签： cssreactjssemantic-ui-react