如何使用覆盖在轮播绘图 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;
}
有什么办法呢?
1条答案
按热度按时间q3aa05251#
也许使用
className="fixed-top"
会有所帮助。我没有你的模态,所以我使用dbc.Card。请检查以下代码: