使用自定义CSS的PlotlyDash中的列存在问题

Question

下面的代码应该在一个名为Setup的选项卡中生成三个相邻的下拉菜单，但是我得到的是三个下拉菜单，一个在另一个之上

我做错了什么？任何帮助都将不胜感激！我已经包括了相关的Python代码，后面是我所有的CSS代码。注意show_layout函数最终由index.py中的app.layout调用

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from styles import cma_tab_style, active_cma_tab_style


def show_layout():
    layout = html.Div([
        dcc.Tabs(id='AllTabs',
                 value='SetupTab',
                 children=[
                     dcc.Tab(label='Setup',
                             value='SetupTab',
                             style=cma_tab_style,
                             selected_style=active_cma_tab_style),
                     dcc.Tab(label='Summary',
                             value='SummaryTab',
                             style=cma_tab_style,
                             selected_style=active_cma_tab_style)
                 ]),
        html.Div(id='content')
    ], style={'marginTop': '30px'})
    return layout


@app.callback(Output('content', 'children'),
              Input('AllTabs', 'value'))
def render_content(tab):
    if tab == 'SetupTab':
        content = html.Div(render_setup_tab())
    else:
        content = html.Div([
            html.H3('Tab content 2')
        ])
    return content


def render_setup_tab():
    layout = html.Div(
        children=
        [

            html.Div(
                [
                    dcc.Dropdown(
                        id='the_assets',
                        options=[{'label': x, 'value': x} for x in ('Asset 1', 'Asset 2')],
                        style={'marginTop': '15px', 'background': 'black', 'color': 'black'},
                        placeholder='Asset Name')
                ], className='four columns'),
            html.Div(
                [
                    dcc.Dropdown(
                        id='cma_data',
                        style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
                        placeholder='CMA Data',
                    )
                ], className='four columns'),
            html.Div(
                [
                    dcc.Dropdown(
                        id='cma_gen',
                        style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
                        placeholder='Gen Profile'
                    )
                ], className='four columns'),
        ], className='row')
    return layout

至于{}和{}：

cma_tab_style = {
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': 'rgb(80, 80, 80)',
    'color': 'white',
    'borderTop': '1px solid white',
}

active_cma_tab_style = {
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': 'rgb(255,145,0)',
    'color': 'white',
    'borderTop': '1px solid white',
}

下面是我所有的CSS代码——以防有任何东西导致问题：

body{
    background-color: rgb(33, 33, 33);
    font-family: 'arial';
}

h3{
    font-color: white;
}

li{
    display: block;
    float: center;
    border: 1px solid gray;
    border-right: 1px solid rgb(200, 200, 200);
}


li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    border: 1px solid gray;
}

.active .btn:hover{
    background-color: orange;
    color: white;
}

.ul:hover{
    background-color: orange;
}


li a:active{
    background-color: orange;
}

a{
    display: inline-block;
    padding: 8px;
    background-color: (250, 250, 250)
}

a:hover{
    background-color: orange;
}

.active{
    background-color: rgb(60, 60, 60);
}

.VirtualizedSelectFocusedOption{
    background-color: lightgrey;
    color: black
}

button{
    border-radius: 5px;
    background-color: rgb(60, 60, 60);
    border: none;
    color: white;
    text-align: center;
    font-size: 16px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px
}

button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

button span:after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

Answer 1

已解决：我没有使用className = "four columns"，而是在CSS中添加了以下代码段：

.stuff{
    float: left;
    justify-content: space-between;
    width: 33%;
}

.row:after{
    content: "";
    display: table;
    clear: both;
}

并设置className = "stuff"

希望这能帮助其他面临类似问题的人