Почему мое приложение реакции отображает два флажка ввода на мобильном телефоне? Отлично смотрится на рабочем столе. (См. Фото)

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;