时间戳

首页 > 解决方案 > 如何设置单选按钮组的宽度以填充 Bootstrap 中父容器的宽度？

python - 如何设置单选按钮组的宽度以填充 Bootstrap 中父容器的宽度？

问题描述

有没有办法设置跨越父容器/dbc.column 宽度的单选按钮组？我目前正在使用 Dash Plotly 和 Python 创建一个 Web 应用程序，并且我在宽度为 2 的列中创建的单选按钮组尽管进行了多次尝试，但并未跨越该列的宽度。下面是我如何使用页面底部的教程定义单选按钮组。

html.Div([
      dbc.RadioItems(
          id="pr-select",
          className="btn-group d-flex",
          labelClassName="btn btn-info",
          labelCheckedClassName="active",
          style={'width': '100%'},
          options=[{'label': 'Opt1', 'value': 'True', 'disabled': 'True'},
                   {'label': 'Opt2', 'value': 'False', 'disabled': 'True'},
                   ],
          ),
      ],
      className='radio-group mb-2',
      style={'width': '100%'}
 ),

如您所见，我已经尝试在样式中将宽度设置为 100%，但这对宽度完全没有影响。作为参考，这是它在应用程序上输出的内容。如您所见，所有无线电组相对于它们所在的列跨越不同的宽度。任何帮助将不胜感激！

在此处输入图像描述

编辑： 如果您想重现它并使用 CSS，我在下面包含了示例代码。另请注意，该文件必须名为 app.py 并且必须位于一个目录中，该目录中包含一个名为 assets 的文件夹，其中包含一个 mystyle.css 文件，该文件使用了此处页面底部列出的自定义 css：

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

from flask_sqlalchemy import SQLAlchemy
from flask import Flask

server = Flask(__name__)

app = dash.Dash(__name__, server=server,
                external_stylesheets=[dbc.themes.FLATLY],
                suppress_callback_exceptions=True,
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}],
                )

app.layout = dbc.Container([
                dbc.Row([
                    dbc.Col([
                        html.Div([
                            dbc.RadioItems(
                                id="hand-select",
                                className="btn-group",
                                labelClassName="btn btn-info",
                                labelCheckedClassName="active",
                                options=[
                                    {'label': 'Opt1', 'value': 'Left', 'disabled': 'True'},
                                    {'label': 'Opt2', 'value': 'Both', 'disabled': 'True'},
                                    {'label': 'Opt3', 'value': 'Right', 'disabled': 'True'},
                                ],
                                style={"margin-top": "auto",
                                       }
                            ),
                        ],
                            className='radio-group mb-2',
                            style={'width': '100%'}
                            #style={'max-width': 'fit-content'}
                        ),
                        html.Div([
                            dbc.RadioItems(
                                id="pr-select",
                                className="btn-group d-flex",
                                labelClassName="btn btn-info",
                                labelCheckedClassName="active",
                                #inputClassName='mw-100',
                                style={'width': '100%'},
                                options=[
                                    {'label': 'Opt1', 'value': 'True', 'disabled': 'True'},
                                    {'label': 'Opt2', 'value': 'False', 'disabled': 'True'},
                                ],
                            ),
                        ],
                            className='radio-group mb-2',
                            style={'width': '100%'}
                        ),
                        html.Div([
                            dbc.RadioItems(
                                id="cs-select",
                                className="btn-group",
                                labelClassName="btn btn-info",
                                labelCheckedClassName="active",
                                options=[
                                    {'label': 'Option One.........', 'value': 'True', 'disabled': 'True'},
                                    {'label': 'Option Two.........', 'value': 'False', 'disabled': 'True'},
                                ],
                            ),
                        ],
                            className='radio-group mb-2'
                        ),
                    ], width=3, style={'margin-right': '0px',
                                       'margin-left': '0px',
                                       'backgroundColor': 'black'},),

                    dbc.Col([
                ], width=3),

                dbc.Col([

                ], width=6)
            ])
]
)

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

标签： pythonplotly-dashbootstrap-5

解决方案

RadioItemsHTML像这样生成

<div id="pr-select">

  <div class="form-check">
     <input type="radio" ...>
     <label ... >Opt1</label>
  </div>

  <div class="form-check">
     <input type="radio" ...>
     <label ... >Opt2</label>
  </div>

</div>

它需要'width':'100%'在三个地方：

  1. 在外部<div id="pr-select">，这可以使用添加style={'width':'100%'}

  2. in<label ... >并且可以使用styleLabel={'width':'100%'}

  3. in<div class="form-check">并且这在代码中没有方法。
    我发现的唯一解决方案是创建将自动加载的文件assets/style.css（dash文档：添加 CSS 和 JS 并覆盖页面加载模板）

    .form-check {
    width: 100%;
}

资产/style.css

.form-check {
   width: 100%;
}

主文件

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

from flask import Flask

server = Flask(__name__)

app = dash.Dash(__name__, server=server,
                external_stylesheets=[dbc.themes.FLATLY],
                suppress_callback_exceptions=True,
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}],
               )

app.layout = dbc.Container([
                dbc.Row([

                    dbc.Col([
                        
                        html.Div([
                            dbc.RadioItems(
                                id="hand-select",
                                className="btn-group",
                                labelClassName="btn btn-info",
                                labelCheckedClassName="active",
                                inputClassName="btn-check",
                                options=[
                                    {'label': 'Opt1', 'value': 'Left',  'disabled': 'True'},
                                    {'label': 'Opt2', 'value': 'Both',  'disabled': 'True'},
                                    {'label': 'Opt3', 'value': 'Right', 'disabled': 'True'},
                                ],
                                style={'width': '100%'},       # <---  for external <div>
                                labelStyle={'width': '100%'},  # <---  for <input>
                            )
                            ],
                            className="radio-group",
                            style={"margin-top": "5px", "margin-bottom": "5px"}
                        ),
                        
                        html.Div([
                            dbc.RadioItems(
                                id="pr-select",
                                className="btn-group",
                                labelClassName="btn btn-info",
                                labelCheckedClassName="active",
                                inputClassName="btn-check",
                                options=[
                                    {'label': 'Opt1', 'value': 'True',  'disabled': 'True'},
                                    {'label': 'Opt2', 'value': 'False', 'disabled': 'True'},
                                ],
                                style={'width': '100%'},      # <---  for external <div>
                                labelStyle={'width':'100%'},  # <---  for <input>
                            )
                            ],
                            className="radio-group",
                            style={"margin-top": "5px", "margin-bottom": "5px"}
                        ),
                        
                        html.Div([
                            dbc.RadioItems(
                                id="cs-select",
                                className="btn-group",
                                labelClassName="btn btn-info",
                                labelCheckedClassName="active",
                                inputClassName="btn-check",
                                options=[
                                    {'label': 'Option One.........', 'value': 'True',  'disabled': 'True'},
                                    {'label': 'Option Two.........', 'value': 'False', 'disabled': 'True'},
                                ],
                                style={'width':'100%'},       # <---  for external <div>
                                labelStyle={'width':'100%'},  # <---  for <input>
                            )
                            ],
                            className="radio-group",
                            style={"margin-top": "5px", "margin-bottom": "5px"}
                        ),
                    ],
                    width=3, style={'margin-right': '0px',
                                    'margin-left': '0px',
                                    'backgroundColor': 'black'},
                    ),

            ])
])

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

在此处输入图像描述

推荐阅读