Question

这是控件的图像，因为您可以看到rowSpan不工作，第二行从第一行开始。我希望Base Role选择直接位于Role Name输入下面。

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

作为一种解决方法，我正在考虑添加一个父表，并在第一列中包含此表，并在第二列中包含描述的textarea，但是如果可能的话，希望使用某种类型的rowSpan功能来实现此目的。

非常感谢任何帮助。

我有一个ReactBootstrap网格控件，我想为一个描述添加一个列，并给它一个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

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

我的工作是在原始网格中添加2列，其中第一列包含另一个网格，其中包含1列和行，其中包含通常出现在第一列中的所有数据，第二列包含多列行文字区。

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

这是我的代码。

＆＃13;

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

＆＃13;

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>

既然我们可以在这里看到代码重复，你可能想要一些函数来构建'Hi man'和'after text area'区域的内容。

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>

分享编辑标志

ReactBootstrap Grid RowSpan无法正常工作

3 个答案: