Question

我正在创建一个表单，用户可以在其中提取一些交易详细信息。用户应输入（商店，注册，转移）详细信息或发票编号。我以表格的形式添加了这些内容，并且希望在这些输入部分之间使用垂直分隔线。理想情况下，将在它们之间显示一个或多个部分。

我尝试了互联网上的多个建议，但似乎没有任何效果。我在第一列中有多行，而在第二列中只有一行。我已经尝试过https://codepen.io/lyndenoliver/pen/WpYPBp?editors=1100这个示例，但这将分隔符放在第一列中每一行的第一项之后

<div>
 <div className="container-fluid">
     <div className="row">
         <form className="col s12" id="storeReportForm" onSubmit={this.handleOnSubmit}>
             <div className="row">
                 <div className="col s12 m6">
                     <div className="row">
                         <h6 className="col s12 m2 required-field" >Store</h6>
                         <div className="input-field col s12 m3">
                             <input id="store" type="number" className={`validate ${selected.store}`} maxLength="4"
                                 value = {this.state.store}
                                 onChange={this.handleChange}
                                 onKeyPress={this.handleKeyPress} />
                             <label htmlFor="store">Store</label>
                         </div>
                         <h6 className="col s12 m2 offset-m1" >Terminal</h6>
                         <div className="input-field col s12 m3">
                             <input id="terminal" type="number" className="validate" maxLength="4" 
                                 value = {this.state.terminal}
                                 onChange={this.handleChange}
                                 onKeyPress={this.handleKeyPress} />
                             <label htmlFor="terminal">Term</label>
                         </div>
                     </div>
                     <div className="row">
                     <h6 className="col s12 m2" >Account</h6>
                     <div className="input-field col s12 m3">
                         <input id="account" type="number" className="validate" maxLength="4" 
                             value={this.state.account}
                             onChange={this.handleChange}
                             onKeyPress={this.handleKeyPress} />
                         <label htmlFor="account">Last 4</label>
                     </div>
                     <h6 className="col s12 m2 offset-m1" >Amount</h6>
                     <div className="input-field col s12 m3">
                         <input id="amount" type="text" 
                             className = {this.state.amountSelected === 'true' ? 'valid' : ''}
                             value = {this.state.amount}
                             onChange={this.handleDecimalChange}
                             onKeyPress={this.handleKeyPress} />
                         <label htmlFor="amount">Amount</label>
                     </div>
                 </div>
                 </div>

//need a vertical line here with text or like in the codepen example 
                 <div className="col s11 m5">
                         <h6 className="col s12 m2 required-field" >Invoice</h6>
                         <div className="input-field col s12 m3">
                             <input id="invoice" type="number" className={`validate ${selected.invoice}`} maxLength="4"
                                 value = {this.state.invoice}
                                 onChange={this.handleChange}
                                 onKeyPress={this.handleKeyPress} />
                             <label htmlFor="invoice">Invoice</label>
                         </div>
                 </div>
             </div>
        </form>
    </div>
</div>
</div>

需要使用垂直分隔符来指示用户可以输入任何输入内容

Answer 1

苦苦挣扎了一段时间后，这就是我添加分隔线的方式

<div className="col" style={{marginLeft:'10px',marginRight:'10px'}}>
                                    <div className="row vertical-line"></div>
                                    <div className="row" style={{paddingTop:'90px'}}> OR </div>
                                    <div className="row vertical-line"></div>
                                </div>
div.vertical-line{
  width: 1px; /* Line width */
  border-right: 1px solid #26a69a;
  height: 10%;
  position: absolute;
  padding-left: 10px;
}

如何在包含多个引导程序行的两列之间添加垂直分隔符？

1 个答案: