Question

我无法让JSFiddle与React以及其他一些依赖项一起正常工作，所以我希望与此Github存储库的链接足以证明该问题：

https://github.com/ishraqiyun77/button-issues/

基本上，将渲染一组按钮，并且应将它们自动加宽以填充空白并占据整个行。这适用于Chrome，Edge，Safari和Firefox。看起来像这样：

这不是在IE中发生的情况。我已经把它弄弄了好几个小时，但进展不大：

这是代码，尽管可以克隆我上面发布的仓库：

// component.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    Button,
    Col,
    Modal,
    ModalBody,
    ModalHeader,
    Row
} from 'reactstrap';

import styles from '../assets/scss/app.scss';

class TestPrint extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false,
        }
        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            modal: !this.state.modal
        })
    }

    renderContent() {
        let buttons = [];
        for (let i = 1; i < 50; i++) {
            buttons.push(
                <Col key={i}>
                    <Button
                        key={i}
                        className='cuts-btn'
                    >
                        {i} - Test
                    </Button>
                </Col>
            );
        };
        return buttons;
    }

    render() {
        return (
            <div>
                <Button
                    style={
                        {
                            position: 'fixed',
                            top: '50%',
                            left: '50%',
                            transform: 'translate(-50%, -50%)'
                        }
                    }
                    onClick={this.toggle}
                >
                    Open Modal for Buttons
                </Button>
                <Modal
                    size='lg'
                    isOpen={this.state.modal}
                    toggle={this.toggle}
                    className='results-modal'
                >
                    <ModalHeader toggle={this.toggle}>
                        Button Issues
                    </ModalHeader>
                    <ModalBody>
                        <div className='results-bq-cuts'>
                            <Row>
                                {this.renderContent()}
                            </Row>
                        </div>
                    </ModalBody>
                </Modal>
            </div>
        )
    }
}

ReactDOM.render(<TestPrint />, document.getElementById('app'));

.results-modal {
    max-width: 1200px;

    .modal-content {

        .modal-body {
            margin-left: 13px;
            margin-right: 13px;

            .results-bq-cuts {
                width: 100%;

                .col {
                    padding:2px;
                }

                .cuts-btn {
                    font-size: 11px;
                    padding: 3px;
                    width: 100%;
                    box-shadow: none;
                }

                // .col {
                //     padding: 2px;
                //     display: table-cell;
                //     flex-basis: 100%;
                //     flex: 1;
                // }

                // .cuts-btn {
                //     font-size: 11px;
                //     padding: 3px;
                //     width: 100%;
                //     box-shadow: none;
                // }


            }
        }
    }
}

我将所有<Button>包裹在<Col>中，因为那应该是通过增加按钮的大小来填充空白的地方。

感谢您的帮助！

Answer 1

IE11不喜欢计算弹性项目的宽度。如果将flex-basis: calc( 100% / 24 );添加到.col，它将起作用:)显然可以使用您想要的任何宽度，但是我给出的宽度将一行中的21个框复制了。但是本质上，flex-basis需要定义的宽度才能工作。

或向每个元素添加一个额外的类（例如col-1），这也将实现相同的目的。

无法将按钮换行到新行而不是溢出容器

1 个答案: