python - Columns are not in a row but are stacked in several rows - Stack Overflow

admin管理员组

文章数量:1356413

With the code below, which I copied from "/" (with minor changes):

import dash_bootstrap_components as dbc
from dash import *

app = Dash()

row = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 1")),
                dbc.Col(html.Div("One of three columns 2")),
                dbc.Col(html.Div("One of three columns 3")),
            ],
            align="start",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 4")),
                dbc.Col(html.Div("One of three columns 5")),
                dbc.Col(html.Div("One of three columns 6")),
            ],
            align="center",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 7")),
                dbc.Col(html.Div("One of three columns 9")),
                dbc.Col(html.Div("One of three columns 9")),
            ],
            align="end",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 10"), align="start"),
                dbc.Col(html.Div("One of three columns 11"), align="center"),
                dbc.Col(html.Div("One of three columns 13"), align="end"),
            ]
        ),
    ],
    className="pad-row",
)

app.layout = dbc.Container(fluid=True, children=[row])

app.run(debug=True, host = "127.0.0.1", port=8051)

I would expect to get four rows with three columns each, but I get:

One of three columns 1
One of three columns 2
One of three columns 3
One of three columns 4
One of three columns 5
One of three columns 6
One of three columns 7
One of three columns 8
One of three columns 9
One of three columns 10
One of three columns 11
One of three columns 12

What is wrong with the code?

I'm using Kubuntu 24.04, Python 3.12.8, dash 3.0.1, dash-bootstrap-components 2.0.0.

With the code below, which I copied from "https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/" (with minor changes):

import dash_bootstrap_components as dbc
from dash import *

app = Dash()

row = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 1")),
                dbc.Col(html.Div("One of three columns 2")),
                dbc.Col(html.Div("One of three columns 3")),
            ],
            align="start",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 4")),
                dbc.Col(html.Div("One of three columns 5")),
                dbc.Col(html.Div("One of three columns 6")),
            ],
            align="center",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 7")),
                dbc.Col(html.Div("One of three columns 9")),
                dbc.Col(html.Div("One of three columns 9")),
            ],
            align="end",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 10"), align="start"),
                dbc.Col(html.Div("One of three columns 11"), align="center"),
                dbc.Col(html.Div("One of three columns 13"), align="end"),
            ]
        ),
    ],
    className="pad-row",
)

app.layout = dbc.Container(fluid=True, children=[row])

app.run(debug=True, host = "127.0.0.1", port=8051)

I would expect to get four rows with three columns each, but I get:

One of three columns 1
One of three columns 2
One of three columns 3
One of three columns 4
One of three columns 5
One of three columns 6
One of three columns 7
One of three columns 8
One of three columns 9
One of three columns 10
One of three columns 11
One of three columns 12

What is wrong with the code?

I'm using Kubuntu 24.04, Python 3.12.8, dash 3.0.1, dash-bootstrap-components 2.0.0.

• python
• plotly-dash

Share Improve this question Follow edited Mar 30 at 11:18 Mark Rotteveel 110k229229 gold badges156156 silver badges223223 bronze badges asked Mar 30 at 10:37 Rolf WesterRolf Wester 21722 silver badges66 bronze badges 1

• maybe it needs to add file with CSS which will format it in browser – furas Commented Mar 30 at 10:44

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You have to add file CSS with Bootstrap to get expected result

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

Even example on main page https://dash-bootstrap-components.opensource.faculty.ai/ shows it.

import dash_bootstrap_components as dbc
from dash import Dash, html

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

row = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 1"), width=4),
                dbc.Col(html.Div("One of three columns 2"), width=4),
                dbc.Col(html.Div("One of three columns 3"), width=4),
            ],
            align="start",
            className="g-0",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 4"), width=4),
                dbc.Col(html.Div("One of three columns 5"), width=4),
                dbc.Col(html.Div("One of three columns 6"), width=4),
            ],
            align="center",
            className="g-0",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 7"), width=4),
                dbc.Col(html.Div("One of three columns 8"), width=4),
                dbc.Col(html.Div("One of three columns 9"), width=4),
            ],
            align="end",
            className="g-0",
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns 10"), width=4, align="start"),
                dbc.Col(html.Div("One of three columns 11"), width=4, align="center"),
                dbc.Col(html.Div("One of three columns 12"), width=4, align="end"),
            ],
            className="g-0",
        ),
    ],
    className="pad-row",
)

app.layout = dbc.Container(fluid=True, children=[row])

if __name__ == "__main__":
    app.run(debug=True, host="127.0.0.1", port=8051)

Changes made:

1. Added width=4 to each column (Bootstrap uses a 12-column grid, so 4 + 4 + 4 = 12)

2. Added className="g-0" to each row to remove gutters that might cause wrapping

3. Fixed the duplicate column numbers (you had two "column 9"s and skipped some numbers)

4. Added external_stylesheets=[dbc.themes.BOOTSTRAP] to properly load Bootstrap CSS

本文标签： pythonColumns are not in a row but are stacked in several rowsStack Overflow