ReactBootstrap網格RowSpan不起作用

這是控件的圖像，您可以看到rowSpan不工作，第二行從第一行開始。我希望基本角色選擇直接位於角色名稱輸入的下方。 ReactBootstrap網格RowSpan不起作用

我嘗試添加該行跨度= {5}屬性，你可以在上面看到，但它沒有做任何事情。我也嘗試了rowpan和屬性案例的其他變體。

作爲解決方法，我正在考慮添加一個父表，並在第一列中包含此表，並在第二列中包含說明的textarea，但希望在某些類型的rowSpan功能可能的情況下實現此功能。

任何幫助將不勝感激。

我有一個ReactBootstrap網格控件，我想爲一個描述添加一個列，並給它一個5的rowSpan，這樣另一列就符合這個，並且在這個結束後不會開始。

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

來源

2017-06-09 MattyMerrix

我不明白你想達到什麼，你能添加你的目標的一些繪圖？ –

@AshKander你可以看到我上面添加的圖像。 – MattyMerrix

我不確定是否支持我想要做的事。反應代碼被翻譯成HTML div。 – MattyMerrix

據我所知，RowSpan不支持React引導程序網格列。如果有人發現不同或將來添加此功能，請讓我知道或在下面發佈更新的答案。

我的工作是將2列添加到原始網格，其中第一列包含另一個網格，它具有1列和行，並且所有數據通常會出現在第一列中，第二列包含多列在線文本區域。

您可以看到這已實現，但是我發現第一列中的內部控件的寬度存在一些問題，所以我開始手動設置寬度值。

這裏是我的代碼。

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

 
\t \t \t <ReactBootstrap.Grid > 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t <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" /> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t <div className="label" >Base Role:</div> 
 
\t \t \t \t \t \t \t <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} /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t <div className="label" >Startup Module:</div> 
 
\t \t \t \t \t \t \t <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} /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t \t \t <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) } /> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t \t \t <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) } /> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t </ReactBootstrap.Grid> 
 
\t \t </ReactBootstrap.Col> 
 
\t 
 
\t \t <ReactBootstrap.Col sm={6} md={6} RowSpan={5} > 
 

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

 
</ReactBootstrap.Grid>

來源

2017-06-13 13:53:42 MattyMerrix

好了，所以具有的基本自舉「來實現這一基本方法是

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

試圖將其轉換爲反應的自舉給出（下面代碼未測試）

<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'和'text area'區域的內容。

來源

2017-06-12 22:46:01

我不認爲這是正確的。你有4列。不確定你是否真的瞭解這個問題。 – MattyMerrix

灰你可以看到我的答案在下面，我能夠得到這個工作。 – MattyMerrix

所以你其實只是想要一個2列布局？根據您的初始問題，這很不清楚 –

該行正確行爲。簡單的事實是，說明欄的高度迫使整行具有該高度。下一排在此之下。爲了實現你想要的東西，你只需要插入你的基本角色，啓動模塊，允許和限制公司訪問輸入到角色名稱所在的同一列，而不是將它們放在單獨的行中。

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

份額編輯標誌

來源

2017-06-14 20:34:36 Harry

這與我已發佈的內容幾乎相同。 – MattyMerrix

ReactBootstrap網格RowSpan不起作用

回答

相關問題