Как добавить несколько элементов в строке загрузки 4 - PullRequest
Новая
       6

Как добавить несколько элементов в строке загрузки 4

0 голосов
/ 17 сентября 2018

Я новичок в bootsrtap-4. Я разрабатываю одну страницу в HTML с использованием bootstrap-4, но, столкнувшись с некоторыми проблемами, в то время как для обеспечения ее адаптивности она должна работать, например, в 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:

вывод первого экрана

Второй экран, на котором он отображается на экране размера M:

второй вывод экрана

Что я ищу для фактического вывода:

фактический вывод

может кто-тоПожалуйста, объясните мне, как мне достичь этого дизайна.

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 17 сентября 2018

Я бы подумал сделать это столом.Так как это выглядит так на ваших фотографиях.Кроме того, я бы предложил не помещать несколько элементов в сетку.

Позвольте привести пример.В вашем примере кода у вас есть: 

<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.

Тот же принцип применим ко всему вашему коду.

...