css - 为什么我的反应应用程序在移动设备上呈现两个输入复选框？在桌面上看起来不错。（见照片）

Question

不知道除了有帮助的列之一之外，我还能提供哪些其他信息。我难住了。

[编辑] 为这个组件添加了完整的代码。这在台式机上看起来不错，但在我的手机或平板电脑上却不行。看照片。我正在重复这一点，因为由于代码过多且信息不足，我无法保存对这个问题的编辑，所以在这里我什么都没有。

移动的：

桌面：

import React, { Component } from 'react';
import API from '../utils/API';

class Attendance extends Component {
    state = {
        selectedOption: "",
        disabled: ""
    };

    handleOptionChange = (changeEvent) => {
        this.setState({
            selectedOption: changeEvent.target.value
        });
    };

    handleFormSubmit = (formSubmitEvent) => {
        formSubmitEvent.preventDefault();

        if (!this.state.selectedOption) {
            return;
        } else {
            this.setState({
                disabled: "true"
            })
            API.updateAttendance(this.props.student._id, { present: this.state.selectedOption });
        }
    };

    render() {
        return (
            <div className="col d-flex justify-content-end" >
                <form onSubmit={this.handleFormSubmit}>

                    <div className="row mt-3">

                        <div className="col-sm-3">
                            <label className="text-danger">
                                <input
                                    type="checkbox"
                                    value="absent"
                                    checked={this.state.selectedOption === 'absent'}
                                    onChange={this.handleOptionChange}
                                    disabled={this.state.disabled}
                                />
                                Absent
                            </label>
                        </div>

                        <div className="col-sm-3">
                            <label className="text-warning">
                                <input
                                    type="checkbox"
                                    value="excused"
                                    checked={this.state.selectedOption === 'excused'}
                                    onChange={this.handleOptionChange}
                                    disabled={this.state.disabled}
                                />
                                Excused
                            </label>
                        </div>

                        <div className="col-sm-3">
                            <label className="text-success">
                                <input
                                    type="checkbox"
                                    value="present"
                                    checked={this.state.selectedOption === 'present'}
                                    onChange={this.handleOptionChange}
                                    disabled={this.state.disabled}
                                />
                                Present
                            </label>
                        </div>

                        <div className="col-sm-3">
                            <div className="form-group">
                                <button type="submit" className="btn btn-sm btn-dark" onSubmit={this.handleFormSubmit} disabled={this.state.disabled}>
                                    <i className="fas fa-user-check" />
                                </button>
                            </div>
                        </div>

                    </div>

                </form>
            </div>
        );
    }
}

export default Attendance;

标签： cssreactjsmobilejsxreact-bootstrap