React Bootstrap Grid RowSpan 不起作用

Question

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

如上所示，我尝试添加 rowSpan={5} 属性，但它没有做任何事情。我还尝试了行跨度和属性大小写的其他变体。

作为一种解决方法，我正在考虑添加一个父表并将该表放置在第一列中，并将描述的文本区域放置在第二列中，但如果可能的话，我希望通过某种类型的 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

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

我的解决方法是在原始网格中添加 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 2

好的，所以使用“基本引导”实现此目的的基本方法是

<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>

由于我们可以在这里看到代码重复，您可能需要一些函数来构建“嗨，男人”和“文本区域之后”区域的内容。

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>

分享编辑标志