移动视图中的Reactstrap InputGroup暂时性问题

Question

我在模态内使用InputGroup中的reactstrap组件。在“桌面”视图中看起来不错，但在“移动”视图中像这样：

代码：

 <Row>
      <Col xs='2'>
                <span>Price(s)</span>
      </Col>
      <Col xs='10'>
           <PriceInput
             cats={this.state.cats}
           />
       </Col>
 </Row>

价格输入和描述字段被添加为另一个组件，因此我可以为其添加多个价格

PriceInput代码

  <Row>
       <Col xs='3'>
             <InputGroup 
               className={'form-group'}>
               <InputGroupAddon addonType="prepend">{props.symbol} 
               </InputGroupAddon>
               <Input
                   type="text"
                   placeholder='0.00'/>
             </InputGroup>

         </Col>
         <Col xs='7'>
           <Input
            type="text"
            placeholder='description'/>
          </Col>
          <Col xs='2'>
            <Button >
             <i color={'red'} 
               className='zmdi zmdi-delete'>
             </i>
            </Button>
           </Col>
     </Row>

如何设置价格和价格符号一起包装？

Answer 1

将您的xs道具更改为xl即可