虚拟化 select 设计受到 Bootstrap 4 的干扰

Question

我使用虚拟化 select 和 Bootstrap 3，最近升级到 Bootstrap 4，但在那之后虚拟化 select 设计完全被打乱了。

下面我提供了相同的代码片段：

import VirtualizedSelect from 'react-virtualized-select'; 
import 'react-select/dist/react-select.css'; 
import 'react-virtualized/styles.css'; 
import 'react-virtualized-select/styles.css';

<div className="input-group customSearchBar">
                <div className="input-group-prepend"><span className="input-group-text"><i className="fa fa-search"></i></span></div>
                <VirtualizedSelect ref={objNode => this.objVirtualizedSelect = objNode} labelKey={this.state.labelKey} async={true} loadOptions={this.getOptions}
                valueKey={this.state.valueKey} disabled={this.state.disabled} clearable={this.state.clearable}
                value={this.state.selectValue} placeholder={this.state.placeholder} multi={this.state.multi}
                joinValues={this.state.joinValues} simpleValue={this.state.simpleValue} autoload={false}
                backspaceRemoves={this.state.backspaceRemoves} deleteRemoves={this.state.deleteRemoves}
                onChange={this.updateValue.bind(this)} closeOnSelect={this.state.closeOnSelect} onSelectResetsInput={this.state.onSelectResetsInput} />
                <div className="input-group-append">
                        <button className="btn btn-primary" type="button" disabled={this.state.disabled} title={this.state.multiLangMsgs.ADD_USERS_TO_GROUP} onClick={this.addUsersClick}>
                                <i className="fa fa-plus"></i>
                        </button>
                </div>
        </div>

和Bootstrap3

和Bootstrap4

我已经为此创建了一个沙箱

Virtualized Select

Answer 1

VirtualizedSelect 中的第一个元素是具有 Select is-clearable is-searchable Select--single[= 的 relative div 38=] class 个名字。它没有 width。

input-group 是一个 flex 元素。默认情况下，在这种情况下，它的所有直接内容都需要尽可能多的 space，因为您没有使用 form-control 元素。如果您需要 Select 元素占用所有可用的 space，则必须指定它。

最好的方法是使用 div 和 flex-grow-1 class 作为 VirtualizedSelect 的容器。这样做，需要所有可用的 space.

<div className="flex-grow-1"> <VirtualizedSelect options={options} /> </div>

https://codesandbox.io/s/w0op7n5rw8

您可以使用 form-control，但它也适用于其他一些样式。因此，flex-grow-1是最好的解决方案。

虚拟化 select 设计受到 Bootstrap 4 的干扰

Virtualized select design got disturbed with Bootstrap 4

reactjs

bootstrap-4

react-virtualized