css 如何在Plotly Jmeter 板 Bootstrap 中使用覆盖?

xzv2uavs  于 2023-01-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(200)

如何使用覆盖在轮播绘图 Jmeter 板 Bootstrap ?
我使用的是python的bootstrap(dash_bootstrap_components-dbc),我有一个Carousel标记,其中包含三个图像和一些文本,我希望将其覆盖到我的carousel的右侧。

    • 当前**

    • 理想:浮动**

下面是代码:
应用程序:

from dash import Dash, html
import dash_bootstrap_components as dbc

from components.callbacks import modals

app = Dash(__name__, title = 'page test',
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = dbc.Container([

    dbc.Container([

        dbc.Carousel(
            items=[
                {"key": "1", "src": "/assets/images/NY.jpg"},
                {"key": "2", "src": "/assets/images/tokio.jpg"},
                {"key": "3", "src": "assets/images/paris.jpg"},
            ],
            controls=False,
            indicators=False,
            interval=2000,
            ride="carousel",      
        ),

        dbc.Container([
            dbc.Container([
                dbc.Row(children=[

                    dbc.Col([

                    html.H1("Title", className="sub_title"),
                    html.P("Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, illo eos ad \
                            inventore reiciendis alias impedit repellendus dolorum. Itaque cum perspiciatis nihil \
                            mollitia adipisci est reprehenderit a, autem placeat qui. Fugit?"),
                    modals,

                    ],width={"size": 6, "offset": 6}),

                ], className="row text-center"), 
            ]),
        ], id="overlay"),

    ], fluid=True, id="main", className='main'),

], fluid=True, class_name='home') 

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

CSS:

.home{
    padding: 0px 0px 0px 0px;
}

.main{
    padding: 0px 0px 0px 0px;
}

#main .carousel-inner img{
    max-height: 70vh;
    object-fit: cover;
    filter: grayscale(70%);
}

#carousel {
    position: relative;
}

#carousel .overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,0,0,0.5);
    color: white;
    
}

有什么办法呢?

q3aa0525

q3aa05251#

也许使用className="fixed-top"会有所帮助。我没有你的模态,所以我使用dbc.Card。请检查以下代码:

from dash import Dash, html
import dash_bootstrap_components as dbc

df = px.data.gapminder()
fig = px.area(df, x="year", y="pop", color="continent", line_group="country")

app = Dash(__name__, title = 'page test',
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = dbc.Container([
        dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
            html.H1("Title", className="sub_title"),
            html.P("Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, illo eos ad \
                            inventore reiciendis alias impedit repellendus dolorum. Itaque cum perspiciatis nihil \
                            mollitia adipisci est reprehenderit a, autem placeat qui. Fugit?")
                ])
            ])
        ],width={"size": 3, "offset": 9})
    ], className="fixed-top"),
    dbc.Row([
        dbc.Carousel(
            items=[
                {"key": "1", "src": "/assets/1_times_square_night_2013.jpg"},
                {"key": "2", "src": "/assets/1_times_square_night_2013.jpg"},
                {"key": "3", "src": "assets/1_times_square_night_2013.jpg"},
            ],
            controls=False,
            indicators=False,
            interval=2000,
            ride="carousel",      
        ),
    ]),
    dbc.Row([
        dbc.Col([
            dcc.Graph(figure=fig)
        ])
    ]),
    dbc.Row([
        dbc.Col([
            dcc.Graph(figure=fig)
        ])
    ])
], fluid=True) 

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

相关问题