如何有效地使用dbc.Row？
如何有效地使用dbc.Row？
提问于 2022-05-30 10:34:59
我正在用破折号来构建一个应用程序，但我对如何正确地设置这些项目感到困惑。
import dash
import dash_bootstrap_components as dbc
from dash import html
from dash import dcc
app = dash.Dash(__name__)
app.layout = html.Div([
dbc.Row([ #row 1
dcc.Input(type='text'),
html.Button('A button'),
]),
html.Br(),
dbc.Row([ #row 2
dcc.Dropdown(['0','1', '2','3','4','5','6','7','8','9','10'],
'1',
style={
'width':'10%'}),
html.Button('A Button'),
])
])
if __name__ == '__main__':
app.run_server(debug=True)第1行中的项目是内联的，但第2行中的项是相互叠加的。两行都由不同的元素组成，那么如何将第2行中的项强制内联呢？关于dbc.Row的规则是什么？
回答 2
Stack Overflow用户
发布于 2022-05-31 01:45:58
我认为这里存在的问题是，您使用的是破折号引导组件，但是使用默认样式表，我认为您应该将dbc.Col和dbc.Row结合起来，以做出更好的布局。下面是示例代码：
import dash
import dash_bootstrap_components as dbc
from dash import html
from dash import dcc
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
dbc.Row([
dbc.Col([
dcc.Input(type='text')
],width={'size':1,'offset':0,'order':'1'}),
dbc.Col([
html.Button('A button'),
],width={'size':1,'offset':0,'order':'1'})
]),
html.Br(),
dbc.Row([
dbc.Col([
dcc.Dropdown(['0','1', '2','3','4','5','6','7','8','9','10'],
'1'),
],width={'size':1,'offset':0,'order':'1'}),
dbc.Col([
html.Button('A Button'),
],width={'size':1,'offset':0,'order':'1'})
])
])
if __name__ == '__main__':
app.run_server(debug=True)正如您所看到的，我在布局中添加了external_stylesheets=[dbc.themes.LUX]和dbc.Col。
Stack Overflow用户
发布于 2022-06-01 07:49:13
您也可以使用引导5代替使用破折号引导组件库同样-
import dash
import dash_bootstrap_components as dbc
from dash import html
from dash import dcc
app = dash.Dash(__name__, external_stylesheets = ["https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"])
app.layout = html.Div([
html.Div([
html.Div(
dcc.Input(id = "input-1", type = "text", placeholder = "Enter", className = "form-control"),
className = "col-lg-5"),
html.Div(
html.Button("Submit", id = "submit-1", className = "btn btn-dark"),
className = "col-lg-3"),
], className = "row row-cols-auto mb-4"),
html.Div([
html.Div(
dcc.Dropdown(['0','1', '2','3','4','5','6','7','8','9','10'],
'1'),
className = "col-lg-5"),
html.Div(
html.Button("Submit", id = "submit-2", className = "btn btn-dark"),
className = "col-lg-3"),
], className = "row row-cols-auto")
], className = "container-fluid mt-2")
if __name__ == '__main__':
app.run_server(debug=True)[![Sample][1]][1]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72432946
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号