移动视图中的 Reactstrap InputGroup resposive Issue

Question

我在模态中使用来自 reactstrap 的 InputGroup 组件。在桌面视图中它看起来不错但移动视图是这样的：

代码：

 <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 它会起作用

移动视图中的 Reactstrap InputGroup resposive Issue

Reactstrap InputGroup resposive Issue in mobile view

user-interface

reactjs

reactstrap