我正在使用Office UI Fabric构建SPFx React webpart . 我想使用DetailList，但它只应在屏幕上以50％的宽度显示，因为我需要在列表右侧显示有关所选项目的一些附加信息 . 我正在使用Bootstrap将这两个组件对齐 . 这样可行，但是我的DetailList中始终显示一个水平滚动条，因为行宽仍设置为全屏 . 当我调整屏幕大小并再次放大时，滚动条消失了，所以这只是初始渲染的一个问题 .

这是我的DetailList的样子：

<div className="container-fluid">
            <div className="row">
              <div className="col-md-6">
                <DetailsList
                  items={roles}
                  columns={_columnsRoles}
                  setKey={'roles'}
                  layoutMode={DetailsListLayoutMode.fixedColumns}
                  selection={this._selectionRoles}
                  selectionPreservedOnEmptyClick={true}
                  selectionMode={SelectionMode.single}
                  onItemInvoked={e=>this._actionRolesPanel("edit")}
                  ariaLabelForSelectionColumn="Toggle selection"
                  ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                />  
              </div>
              <div className="col-md-6">

              </div>
            </div>
          </div>

知道我可以做些什么来初步设置我的控制正确的单元格宽度？ Here是它在屏幕上的样子：

提前致谢 .

reactjs spfx