Столбцы Bootstrap 5 не отображаются в строке

У меня есть HTML-макет, который я создаю для музыкального проигрывателя с использованием Bootstrap 5. Есть раздел плеера, в котором я хотел бы отобразить информацию о текущем паттерне, воспроизводимом в песне.

Вот что я хочу отобразить. По сути, это две колонки. Слева находится столбец списка заказов, в котором я хочу, чтобы все номера шаблонов в списке заказов отображались вертикально. Этот очень узкий.

Справа находится раздел данных паттерна, в котором показаны данные паттерна, воспроизводимого в данный момент. Иногда это может быть очень широко.

Я хочу, чтобы они отображались рядом. Однако если данных для шаблона много или область просмотра мала, второй элемент div отображается под первым. Я хочу, чтобы два элемента div всегда отображались рядом друг с другом, при этом первый элемент div занимал только необходимую ширину, а второй — остальную.

Вот фрагмент, чтобы вы могли понять, что я имею в виду. Если вы сузите окно браузера, вы увидите, что столбец данных шаблона опускается ниже столбца списка заказов, но я хочу, чтобы они оставались рядом друг с другом.

td.fixed-col {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

td.row-num-col {
    width: 3em;
}

td.tracker-col {
    width: 4em;
}

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin = "anonymous">

<body>
    <div class = "container my-2 mx-1 py-2 bg-light rounded" id = "info">
        <!-- An unrelated container that shows the playback controls -->
    </div>
    <div class = "container my-2 mx-1 py-2 bg-light rounded">
        <div class = "row">
            <!-- This should be on the left and should be narrow --> 
            <div class = "col-auto" id = "order-list">
                <div id = "order_list" class = "column text-warning bg-dark rounded p-3 font-monospace text-center">
                    <div id = "order-0">0</div>
                    <div id = "order-1">1</div>
                    <div id = "order-2">2</div>
                    <div id = "order-3">3</div>
                    <div id = "order-4">4</div>
                </div>
            </div>
            <!-- This should be on the right and take up the remaining horizontal space -->
            <div class = "col" id = "pattern-data">
                <div id = "other-panel" class = "column text-warning bg-dark rounded p-3 font-monospace overflow-x-auto" style = "overflow-x: auto; white-space: nowrap;">
                    <table id = "patternView">
                        <tr id = "pattern_1_header">
                          <td class = "row-num-col fixed-col">Row</td>
                          <td class = "tracker-col fixed-col">Ch 0</td>
                          <td class = "tracker-col fixed-col">Ch 1</td>
                          <td class = "tracker-col fixed-col">Ch 2</td>
                          <td class = "tracker-col fixed-col">Ch 3</td>
                        </tr>
                        <tr id = "pattern_1_row_0" class = "">
                          <td class = "row-num-col fixed-col">0</td>
                          <td class = "tracker-col fixed-col">F-5</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">F-5</td>
                          <td class = "tracker-col fixed-col">---</td>
                        </tr>
                        <tr id = "pattern_1_row_1" class = "">
                          <td class = "row-num-col fixed-col">1</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                        </tr>
                        <tr id = "pattern_1_row_2" class = "">
                          <td class = "row-num-col fixed-col">2</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">F-5</td>
                        </tr>
                        <tr id = "pattern_1_row_3" class = "">
                          <td class = "row-num-col fixed-col">3</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

Что мне нужно изменить, чтобы #pattern-data всегда находился справа от #order-list, даже в небольшом окне просмотра (или если в таблице много столбцов)?

html css twitter-bootstrap bootstrap-5

22.03.2024 22:39

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно просто добавить класс flex-nowrap в эту строку:

<div class = "row flex-nowrap">
   <!-- This should be on the left and should be narrow -->

23.03.2024 00:56

Ответ принят как подходящий

Когда вы используете класс .flex-nowrap с классом .row, он предотвращает вертикальное расположение столбцов. Вместо этого все столбцы остаются в одной строке по горизонтали, даже если экран недостаточно широк, чтобы вместить их все. Вот измененный код:

td.fixed-col {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

td.row-num-col {
    width: 3em;
}

td.tracker-col {
    width: 4em;
}

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin = "anonymous">

<body>
    <div class = "container my-2 mx-1 py-2 bg-light rounded" id = "info">
        <!-- An unrelated container that shows the playback controls -->
    </div>
    <div class = "container my-2 mx-1 py-2 bg-light rounded">
        <div class = "row flex-nowrap" style = "overflow-x: auto;">
            <!-- This should be on the left and should be narrow --> 
            <div class = "col-auto" id = "order-list">
                <div id = "order_list" class = "column text-warning bg-dark rounded p-3 font-monospace text-center">
                    <div id = "order-0">0</div>
                    <div id = "order-1">1</div>
                    <div id = "order-2">2</div>
                    <div id = "order-3">3</div>
                    <div id = "order-4">4</div>
                </div>
            </div>
            <!-- This should be on the right and take up the remaining horizontal space -->
            <div class = "col" id = "pattern-data">
                <div id = "other-panel" class = "column text-warning bg-dark rounded p-3 font-monospace overflow-x-auto" style = "white-space: nowrap;">
                    <table id = "patternView">
                        <tr id = "pattern_1_header">
                          <td class = "row-num-col fixed-col">Row</td>
                          <td class = "tracker-col fixed-col">Ch 0</td>
                          <td class = "tracker-col fixed-col">Ch 1</td>
                          <td class = "tracker-col fixed-col">Ch 2</td>
                          <td class = "tracker-col fixed-col">Ch 3</td>
                        </tr>
                        <tr id = "pattern_1_row_0" class = "">
                          <td class = "row-num-col fixed-col">0</td>
                          <td class = "tracker-col fixed-col">F-5</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">F-5</td>
                          <td class = "tracker-col fixed-col">---</td>
                        </tr>
                        <tr id = "pattern_1_row_1" class = "">
                          <td class = "row-num-col fixed-col">1</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                        </tr>
                        <tr id = "pattern_1_row_2" class = "">
                          <td class = "row-num-col fixed-col">2</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">F-5</td>
                        </tr>
                        <tr id = "pattern_1_row_3" class = "">
                          <td class = "row-num-col fixed-col">3</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                          <td class = "tracker-col fixed-col">---</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

Кажется, это помогает, но в меньшем окне просмотра строка становится длиннее по горизонтали, чем родительский контейнер. Есть ли какое-нибудь решение для этого?

— 25.03.2024 16:40

Когда вы используете .flex-wrap в своем коде, это означает, что если на маленьком устройстве недостаточно места, контент будет располагаться вертикально, чтобы соответствовать экрану. Однако если вы также добавите .flex-sm-nowrap, это гарантирует, что на больших устройствах, таких как планшеты или настольные компьютеры, контент будет оставаться в одном ряду по горизонтали, даже если пространство ограничено.

— 25.03.2024 16:58

Не совсем то, что я имел в виду - я добавил .flex-nowrap в строку, как вы предложили, и это сделало то, что я хотел. Большой! Однако если в таблице много столбцов или область просмотра мала, строка расширяется и становится шире родительского контейнера. Они все в одном ряду, и это хорошо, но я не уверен, почему <div class = "row flex-nowrap"> шире родительского <div class = "container my-2 mx-1 py-2 bg-light rounded">

— 25.03.2024 17:10

Когда вы добавляете .flex-nowrap, он сохраняет все в одной строке, даже если места мало. Чтобы убедиться, что вы можете прокручивать горизонтально, когда контент становится слишком широким, просто поместите overflow-x: auto в flex-контейнер, например: <div class = "row flex-nowrap" style = "overflow-x: auto;"> . Я обновил ответ, пожалуйста, посмотрите.

— 26.03.2024 09:46

23.03.2024 10:29