React Bootstrap Grid RowSpan 不工作

Question

这是控件的图像，您可以看到 rowSpan 不起作用，第二行从第一行下方开始。我希望基本角色 select 直接位于角色名称输入下方。

我尝试添加 rowSpan={5} 属性，如您在上面所见，但它没有执行任何操作。我还尝试了 rowspan 和属性大小写的其他变体。

作为一种解决方法，我正在考虑添加一个父项 table 并将此 table 放置在第一列中，并将描述的文本区域放置在第二列中，但我想通过某种类型的rowSpan 功能（如果可能）。

如有任何帮助，我们将不胜感激。

我有一个 ReactBootstrap Grid 控件，我想为 Description 添加一列并将其 rowSpan 设置为 5，以便另一列与这一列一致并且不会在这一列结束后开始。

                    <ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}>
                        <ReactBootstrap.Row>
                            <ReactBootstrap.Col sm={6} md={6}>
                                <Input label="Name:" ref={(r) => this.name= r} className={this.state.errors.name} defaultValue={object.name} onChange={ value => this.onFieldChange("name", value) } maxLength="50" />
                            </ReactBootstrap.Col>
                            <ReactBootstrap.Col sm={6} md={6} rowSpan={5} >

                            <div className="label">Description:</div>
                            <textarea ref="notes" rows="15" onChange={ this.onChangeDescription } style={{ width: "99%" }} disabled={ object.isDeleted }>
                                { object.description }
                            </textarea>

                        </ReactBootstrap.Col>
                        </ReactBootstrap.Row>

Answer 1

好的，所以使用 'basic bootstrap' 实现此目的的基本方法是

<div class='row'>
    <div class="hidden-xs col-sm-6">
      <div>Hi man</div>
      <div>after the text area</div>
    </div>
    <div class="hidden-sm col-xs-12">
      <div>Hi man</div>
    </div>        
    <div class="col-sm-6">
      <textarea rows="5"></textarea>
    </div>
    <div class="hidden-sm col-xs-12">
      <div>after the text area</div>
    </div>
</div>

尝试将其转换为 react-bootstrap 给出（以下代码未测试）

<ReactBootstrap.Row>
    <ReactBootstrap.Col className="hidden-xs" sm={6}>
      <div>Hi</div>
      <div>after the text area</div>
    </ReactBootstrap.Col>
    <ReactBootstrap.Col className="hidden-sm">
      <div>Hi man</div>
    </ReactBootstrap.Col>        
    <ReactBootstrap.Col sm={6}>
      <textarea rows="5"></textarea>
    </ReactBootstrap.Col>
    <ReactBootstrap.Col className="hidden-sm">
      <div>after the text area</div>
    </ReactBootstrap.Col>
</ReactBootstrap.Row>

并且由于我们可以在此处看到代码重复，您可能需要一些函数来构建 'Hi man' 和 'after the text area' 区域的内容。

Answer 2

据我所知，React Bootstrap 网格列不支持 RowSpan。如果有人发现不同或将来添加此功能，请告诉我或 post 在下面更新答案。

我的解决方法是向原始网格添加 2 列，其中第一列包含另一个网格，该网格具有 1 列和行，其中包含通常会出现在第一列中的所有数据，第二列包含多行文本区域。

你可以看到这已经实现了，但是我发现第一列中内部控件的宽度存在一些问题，所以我开始手动设置它们的宽度值。

这是我的代码。

<ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}>
<ReactBootstrap.Row>
 <ReactBootstrap.Col sm={6} md={6}>

   <ReactBootstrap.Grid >
    <ReactBootstrap.Row>
     <ReactBootstrap.Col sm={6} md={6}>
      <Input label="Role Name:" ref={(r) => this.roleName = r} className={this.state.errors.roleName} width="300" defaultValue={role.name} onChange={ value => this.onFieldChange("roleName", value) } maxLength="50" />
     </ReactBootstrap.Col>
    </ReactBootstrap.Row>
    <ReactBootstrap.Row>
     <ReactBootstrap.Col sm={6} md={6}>
      <div>
      <div className="label" >Base Role:</div>
       <Select ref={(r) => this.baseRole = r} className={this.state.errors.baseRole} style={{ width: "300px" }} options={baseRoles} onChange={this.onChangeBaseRole} value={ role.baseRoleId } clearable={false} backspaceRemoves={false} />
      </div>
     </ReactBootstrap.Col>
    </ReactBootstrap.Row>
    <ReactBootstrap.Row>
     <ReactBootstrap.Col sm={6} md={6}>
      <div>
      <div className="label" >Startup Module:</div>
       <Select ref={(r) => this.defaultModule = r} className={this.state.errors.defaultModule} style={{ width: "300px" }} options={defaultModules} onChange={this.onChangeDefaultModule} value={ role.moduleId } clearable={false} backspaceRemoves={false} />
      </div>
     </ReactBootstrap.Col>
    </ReactBootstrap.Row>
    <ReactBootstrap.Row>
     <ReactBootstrap.Col sm={6} md={6}>
        <Input label="Allow Company Access" type="checkbox" ref={(r) => this.companyAccess = r} className={ this.state.errors.companyAccess} checked={ role.companyAccess} onChange={ value => this.onFieldChange("companyAccess", value) } />
     </ReactBootstrap.Col>
    </ReactBootstrap.Row>
    <ReactBootstrap.Row>
     <ReactBootstrap.Col sm={6} md={6}>
        <Input label="Restrict Application Access" type="checkbox" ref={(r) => this.applicationGrant = r} className={ this.state.errors.applicationGrant} checked={ role.applicationGrant} onChange={ value => this.onFieldChange("applicationGrant", value) } />
     </ReactBootstrap.Col>
    </ReactBootstrap.Row>
   </ReactBootstrap.Grid>
  </ReactBootstrap.Col>
 
  <ReactBootstrap.Col sm={6} md={6} RowSpan={5} >

   <div className="label">Description:</div>
   <textarea ref="notes" rows="15" onChange={ this.onChangeNotes } style={{ width: "99%" }} disabled={ role.isDeleted }>
    { role.description }
   </textarea>
  </ReactBootstrap.Col>
 </ReactBootstrap.Row>

</ReactBootstrap.Grid>

Answer 3

该行行为正确。一个简单的事实是，描述列的高度迫使整行都具有该高度。当然，下一行在这个下面。为了实现您想要的效果，您只需将基本角色、启动模块、允许和限制公司访问输入插入角色名称所在的同一列，而不是将它们放在单独的行中。

 <ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}>
                    <ReactBootstrap.Row>
                        <ReactBootstrap.Col sm={6} md={6}>
                            <Input label="Name:" ref={(r) => this.name= r} className={this.state.errors.name} defaultValue={object.name} onChange={ value => this.onFieldChange("name", value) } maxLength="50" />

 // insert your base role, startup module, allow and restric company access inputs here

                        </ReactBootstrap.Col>
                        <ReactBootstrap.Col sm={6} md={6} rowSpan={5} >

                        <div className="label">Description:</div>
                        <textarea ref="notes" rows="15" onChange={ this.onChangeDescription } style={{ width: "99%" }} disabled={ object.isDeleted }>
                            { object.description }
                        </textarea>

                    </ReactBootstrap.Col>
                    </ReactBootstrap.Row>

分享编辑标志

React Bootstrap Grid RowSpan 不工作

ReactBootstrap Grid RowSpan not working

html

javascript

col

bootstrap-modal

reactjs