Я пытаюсь разместить все карточки в одной строке с помощью макета приложения. Независимо от конфигурации, карта выпадает в ряд. Я бы хотел, чтобы все карточки находились в одном ряду и имели одинаковую ширину. Если я уменьшу ширину до 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)
Подробнее здесь: https://stackoverflow.com/questions/783 ... lotly-dash
Выравнивание карточек в одну строку в макете приложения — сюжетное тире ⇐ Python
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение