如何在行引导程序4中添加多个元素

Question

我是 bootsrtap-4 的新手，我正在使用 bootstrap-4 在 HTML 中设计一个页面，但是在使其响应时遇到一些问题，它应该可以在例如笔记本电脑-L、笔记本电脑-M 和 i-padd 中工作，而设计它，它只适用于笔记本电脑-L 而不是 M 尺寸和 i-padd，有人可以看到我的代码并告诉我应该怎么做来设计这个页面。

这是我的代码：

<div className="row">
    <div className="col-md-10">
        <div className="row">
            <div className="col-md-4">    
                <div className="fontStyle">
                    <span className="">1</span>
                    <!-- <div className="displayBlk"> -->
                    <label type="text">Select Technology</label>

                        <select value=""  className="selectpicker btn btn-labeled btn-start">
                            <option value="">None Selected</option>
                            <option value="">Hello </option>
                            <option value="">World </option>
                        </select>
                    <!-- </div> -->
                </div>
            </div>
            <div className="col-md-4 rowOne">
                <div className="fontStyle">
                    Select Question Type                    
                    <button type="button" class="btn btn-primary btn-sm">Code Type</button>
                    <button type="button" class="btn btn-default btn-sm">Non Code Type</button>
                </div>
            </div>
            <div className="col-md-4">
                <div className="fontStyle">
                    Number Of Questions
                    <select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
                        <option value="">Select</option>
                        <option value="">01</option>
                        <option value="">02</option>
                    </select>
                </div>
            </div>
        </div>
        <!-- end of 10 col row -->
    </div>
    <div className="col-md-2">
        <span className="">
            <button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
        </span>
        <span>
            <button type="button" class="btn btn-primary btn-sm">+</button>
        </span>
    </div>
</div>
<!-- end of main row -->

在 L 尺寸屏幕中显示的第一个屏幕：

first screen output

在 M 尺寸屏幕中显示的第二个屏幕：

second screen output

我正在寻找的实际输出：

actual output

谁能指导我如何实现这个设计。

感谢您的帮助！

Answer 1

我会考虑把它做成一张桌子。因为它看起来像你的照片。另外，我建议不要将多个元素放入网格结构中。

让我举个例子。在您的示例代码中，您有：

<div className="col-md-2">
    <span className="">
       <button type="button" class="btn btn-outline-primary bt-sm">Reset</button>
    </span>
    <span>
      <button type="button" class="btn btn-primary btn-sm">+</button>
    </span>
 </div>

我建议这样做：

<div class="col-md">
    <span className="">
        <button type="button" class="btn btn-outline-primary bt-sm">Reset</button>
    </span>
</div>

<div class="col-md">
    <span className="">
      <button type="button" class="btn btn-primary btn-sm">+</button>
    </span>
</div>

如果您愿意，可以让元素在自己的迷你世界中尽可能响应。正如您所展示的，当您的按钮和文本可能位于不同的 z 轴上时，事情会变得特别糟糕。

同样的原则适用于您的所有代码。