html - 如何在行 bootstrap 4 中添加多个元素

Question

我是 bootsrtap-4 的新手 我正在使用 bootstrap-4 在 HTML 中设计一个页面，但是在使其响应时遇到一些问题它应该在例如 Laptop-L、Laptop-M 和 i-padd 中工作，而设计它，它只适用于 Laptop-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

我会考虑把它做成一张 table 。因为从你的照片上看是这样的。另外，我建议不要将多个元素放入网格编队中。

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

<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 轴上时，事情会变得特别糟糕。

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