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

Question

我是bootsrtap-4的新手我正在使用bootstrap-4在HTML中设计一个页面，但面对一些问题，同时为了使其响应它应该在例如Laptop-L，Laptop-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轴上时会变得特别糟糕。

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