Принудительное завертывание в Bootstrap форме - PullRequest
Новая
       12

Принудительное завертывание в Bootstrap форме

1 голос
/ 11 февраля 2020

Как видно из названия, у меня проблема с переносом текста с использованием любой формы - чистой html или bootstrap стилизованной. Я пытаюсь получить одну строку вертикального текста во второй строке формы, но текст продолжает переносить. Использование пробела: nowrap уничтожает только всю форму, вызывая ее переполнение, что мне не нужно.

Код реакции: 

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import '../style/Req.css'

const categories = [
    { id: "1", name: "HSE", col: "1" },
    { id: "2", name: "Finance", col: "2" },
    { id: "3", name: "Logistics", col: "9" },
    { id: "4", name: "Management", col: "3" }
]

const requirements = [
    { id: "1", name: "Health & Safety (Occupational)" },
    { id: "2", name: "SAP - Basic User" },
    { id: "3", name: "SAP - Key User" },
    { id: "4", name: "Shipment Planning" },
    { id: "5", name: "SAP - Logistic Transactions" },
    { id: "6", name: "SAP Transactions - Logistics Reporting" },
    { id: "7", name: "Specific Customer Logistic Instructions" },
    { id: "8", name: "Transport Quotations" },
    { id: "9", name: "Transport Documents" },
    { id: "10", name: "Packaging requirements for dangerous materials" },
    { id: "11", name: "Packaging by transport type" },
    { id: "12", name: "Shipment Tracking" },
    { id: "13", name: "German Language" },
    { id: "14", name: "French Language" },
    { id: "15", name: "Phone Usage" }
]

const Req = () => {

    const reqList = requirements.map(req => (
        <td key={req.id}><div className="vert">{req.name}</div></td>
    ))

    const catList = categories.map(category => (
        <th key={category.id} colSpan={category.col}>{category.name}</th>
    ))

    return (
        <div className="tbl">
            <table className="table table-bordered">
                <tr>
                    {catList}
                </tr>
                <tr>
                    {reqList}
                </tr>
            </table>
        </div >
    );
}

export default Req;

CSS код: 

.tbl{
    position: absolute;
    top: 10vh;
    left: 300px;
    right: 200px;
    float: right;
    width: fit-content;
}
.vert{
    font-size: 15px;
    word-wrap: break-word;
    height: auto;
    transform: rotate(-90deg);
    width:auto;
    margin-top: 60px;
}

Я действительно не знаю, почему это происходит, потому что я все еще новичок в разработке front-end.

...