Выравнивание карточек в одну строку в макете приложения — сюжетное тире

Я пытаюсь разместить все карточки в одном ряду с помощью макета приложения. Независимо от конфигурации, карта опускается вниз по строке (см. ниже). Я бы хотел, чтобы все 7 карточек находились в одном ряду и сохраняли каждую карту одинаковой ширины. Если я уменьшу ширину до 1, карточка станет слишком маленькой для отображения какой-либо значимой информации.

Есть ли способ увеличить общий размер макета?

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)


filter_box = html.Div(children=[

        html.Div(children=[
            dcc.Checklist(
                options = [
                ],
                style = {'display': 'inline-block','margin':'0.1rem'}
            ),       

        ], className = "vstack gap-1 h-100",            
        )
    ])

card = dbc.Card(
    [
        dbc.CardHeader('card', className = 'lead', style = {'fontSize': 10}),
        dbc.CardBody(
            [
                html.P('', className = 'card-text'),
                html.H4(id = '', className = 'text-center align-self-bottom'),
            ]
        ),
    ], className = 'border border-3 text-center m-2 mw-10',
    style = {'height':'75%', 'fontSize': 10, 'marginTop': '0'}
)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Row([
                dbc.Col(html.Div(filter_box), 
                        ),
            ]),
        ], xs = 3, sm = 3, md = 3, lg = 3
        ),
        dbc.Col([
            dbc.Row([
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
            ], justify = 'center'),
            dbc.Row([
                dbc.Col([
                dbc.Card([
                    dbc.CardBody([
                        dbc.Row([
                            dcc.Graph(id = ''),
                        ]), 
                        ]),
                    ]),
                ], xs = 4, sm = 4, md = 4, lg = 4),
                dbc.Col([
                    dbc.Card([
                    dbc.CardBody([
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id = '')
                            ], 
                            ),
                        ]),
                    ], style = {'padding-top': '20px'},
                    )
                    ])
                ], xs = 8, sm = 8, md = 8, lg = 8),
            ])
        ], xs = 9, sm = 9, md = 9, lg = 9)
    ])
], fluid = True)


if __name__ == '__main__':
        app.run_server(debug = True, port = 8052)

python layout plotly-dash

19.04.2024 04:18

Почему в Python есть оператор "pass"?

Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.

Некоторые методы, о которых вы не знали, что они существуют в Python

Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...

Основы Python Часть I

Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?

LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа

Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:

Оптимизация кода с помощью тернарного оператора Python

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

Советы по эффективной веб-разработке с помощью Python

Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.

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

Ответы 1

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

Проверьте, работает ли это для вас. Размер карты больше size=1, но немного меньше size=2, но помещается в один ряд.

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


filter_box = html.Div(
    children=[
        html.Div(
            children=[
                dcc.Checklist(
                    options=[], style = {"display": "inline-block", "margin": "0.1rem"}
                ),
            ],
            className = "vstack gap-1 h-100",
        )
    ]
)

card = dbc.Card(
    [
        dbc.CardHeader("card", className = "lead", style = {"fontSize": 10}),
        dbc.CardBody(
            [
                html.P("", className = "card-text"),
                html.H4(id = "", className = "text-center align-self-bottom"),
            ]
        ),
    ],
    className = "border border-3 text-center m-2 mw-10",
    style = {"height": "75%", "fontSize": 10, "marginTop": "0"},
)

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        dbc.Row(
                            [
                                dbc.Col(
                                    html.Div(filter_box),
                                ),
                            ]
                        ),
                    ],
                    xs=3,
                    sm=3,
                    md=3,
                    lg=3,
                ),
                dbc.Col(
                    [
                        dbc.Row(
                            [
                                dbc.Col(card, width = {"size": 2}),
                                dbc.Col(card, width = {"size": 2}),
                                dbc.Col(card, width = {"size": 2}),
                                dbc.Col(card, width = {"size": 2}),
                                dbc.Col(card, width = {"size": 2}),
                                dbc.Col(card, width = {"size": 2}),
                                dbc.Col(card, width = {"size": 2}),
                            ],
                            justify = "center",
                        ),
                        # The card size is bigger than size=1 but slightly smaller than size=2 but fits in single row
                        #### START ####
                        dbc.Row(
                            [
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                            ],
                            justify = "center",
                            class_name = "g-0",
                        ),
                        #### END ####
                        dbc.Row(
                            [
                                dbc.Col(
                                    [
                                        dbc.Card(
                                            [
                                                dbc.CardBody(
                                                    [
                                                        dbc.Row(
                                                            [
                                                                dcc.Graph(id = ""),
                                                            ]
                                                        ),
                                                    ]
                                                ),
                                            ]
                                        ),
                                    ],
                                    xs=4,
                                    sm=4,
                                    md=4,
                                    lg=4,
                                ),
                                dbc.Col(
                                    [
                                        dbc.Card(
                                            [
                                                dbc.CardBody(
                                                    [
                                                        dbc.Row(
                                                            [
                                                                dbc.Col(
                                                                    [dcc.Graph(id = "")],
                                                                ),
                                                            ]
                                                        ),
                                                    ],
                                                    style = {"padding-top": "20px"},
                                                )
                                            ]
                                        )
                                    ],
                                    xs=8,
                                    sm=8,
                                    md=8,
                                    lg=8,
                                ),
                            ]
                        ),
                    ],
                    xs=9,
                    sm=9,
                    md=9,
                    lg=9,
                ),
            ]
        )
    ],
    fluid=True,
)

if __name__ == '__main__':
        app.run_server(debug = True, port = 8052)

Спасибо. Мне нужен только один ряд. Если я удалю параметр ширины, он поместится в одну строку. Мне нужен параметр ширины, чтобы исправить макет при изменении размеров экрана. Могу ли я изменить настройки xs, sm, md, lg? Меня не волнует, какие они. Максимальный размер столбца = 12? Значит, наличие 7 карт шириной 12 всегда будет втиснуто во второй ряд?

— 24.04.2024 01:07

Да, Bootstrap имеет 12 столбцов в сетке.

— 24.04.2024 04:18

23.04.2024 14:06