python - Plotly-Dash:如何跨两行跨越组件
问题描述
我正在尝试使用破折号和引导网格创建仪表板。这是我想要实现的目标:
根据文档(https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/),我可以在行中创建列,但是有没有办法在列中创建行?我需要我的图表跨越先前列的两个“行”。我在想这可以通过以下方式实现:
dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content])])
然而,这些列只是堆叠在彼此之上。这是我前两列的代码:
app.layout = dbc.Col([
dbc.Col([ html.H1("temp1",style={'textAlign': 'center' ,'height':'5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_1', children=['Sales'], className='card-title'),
html.P(id='card_text_1', children=['Sample text.'])
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height':'30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_2', children=['Eng'], className='card-title'),
html.P(id='card_text_2', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_3', children=['Diff'], className='card-title'),
html.P(id='card_text_3', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
], style={'height': '90vh','width':'50vh'}),
dbc.Col([ html.H1("temp2",style={'textAlign': 'center' ,'height': '5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_4', children=['Card Title 4'], className='card-title'),
html.P(id='card_text_4', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_5', children=['Card Title 5'], className='card-title'),
html.P(id='card_text_5', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_6', children=['Card Title 6'], className='card-title'),
html.P(id='card_text_6', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
], style={'height': '90vh','width':'50vh'}),
], style={'height': '100vh', 'width':'100vh'})
解决方案
我可以通过将 dbc.Col 放在 html.Div 中,然后给每个 dbc.Col 一个 CSS style = 'display : inline-block' 来解决这个问题。
推荐阅读
- python-3.x - 使用 tinymce 的 Python 图像上传处理程序代码
- c# - 将 Db 查询结果划分为任意数量的任务
- ios - 为什么 iPhone 12 Pro 立体视频帧垂直移位?
- java - 是否可以在 Cloudsim 中计算动态阈值?
- c# - 第三者名单变更通知
- primefaces - 尽管在 primefaces p:cellEditor 中具有相同的表达式,但 h:outputText 中的 JSF2 ValueExpression 不会评估为 true
- sql-server - 如何将二进制列数据读入火花数据帧?
- c# - 将 retryPolicy 与 SqlAzureExecutionStrategy 一起使用时,避免“SqlParameter 已被另一个 SqlParameterCollection 包含”异常
- mysql - 带有'n'个条件的Mysql查询用NOT括起来
- arrays - 在 Tableview (Swaft) 上获取重复的 Firestore 文档