Question

我对Bootstrap的col课程有疑问我有DOM的这一部分：

    <div class="participant col-xl-6 col-12">
                 <div class="row">
                    <div class="container">
                        <div class="select-participant container">
                            <div class="row">
                                // HERE
                                <input class="participant-name col search-input" placeholder="Choose user" onChange={this.onChange} value={this.state.userName}/>
                                <div class="participants-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img class="mx-auto d-block" src="./images/small-arrow-down.svg" />
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>

在此示例中，input类的col将div推向img一直向右，并且它们排列在同一个，但上级父级使用col-xl-6 在另一个例子中：

            <div class="date-slider col-xl-4 col-12">
                <div class="row">
                    <div class="container">
                        <div class="container date-picker-container">
                            <div class="row">
                                //HERE
                                <input class="date-range col" onChange={this.onChange} value={this.props.initialValue}/>
                                <div class="date-picker-small-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img class="mx-auto d-block" src="./images/small-arrow-down.svg" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

父级是col-xl-4，input的宽度是父级的100％，img正在下一行推送，我想要的是拥有它与input在同一行。我该如何解决这个问题？

Answer 1

您正在以错误的方式使用这些类。正确的方法是：

首先container然后在该容器内有一个类row的div，然后在该行内有一列（col-*）。然后，您的所有内容都需要进入列（如果有多个列，则需要进入其中一列）。

此外，从不将.container嵌套在另一个.container中。至少，不是直接。

同样非常重要：绝不使用内部至少有一列的行！

Bootstrap行和列旨在协同工作。不要使用没有另一个的那个。

参考：

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap col包装

1 个答案: