Как добавить несколько элементов в сетку и сделать ее отзывчивой

Question

Я новичок в веб-разработке, пытаюсь спроектировать следующий экран в bootstrap-4, но не в состоянии спроектировать его как отзывчивый, кто-то может описать, как я могу спроектировать этот экран, используя систему сетки bootstrap-4.

Вот мое изображение, которое я пытаюсь спроектировать, используя систему сетки, используя концепцию строк и столбцов, это должно быть отзывчивым.

вот моя сетка

вот мой код:

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

и вот моя картинка после оформления, как они выглядят.

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

Answer 1

@media (max-width:767px) {
    	.bg-light {
			padding-bottom: 0 !important;
    	}
    	.bg-white {
			background-color: #f8f9fa !important;
			padding-bottom: 1rem !important;
    	}
    	.border-right:nth-child(n+2) {
    		border: none !important;
    	}
    }	
    @media (max-width:991px) {
    	.d-flex.border-right {
    		border: none !important;
    	}
    }	

<div class="container">
    	<div class="row my-5">
    		<div class="col-md-10 col-lg-10 bg-light py-4">
    			<div class="row px-2">
    				<div class="d-flex align-items-center px-2 border-right mb-2 col-12 col-lg-4">
    					<div class="border-right pr-2 mr-1"><p class="font-weight-bold mb-0 text-right w-100">1</p></div>
    					<div class="w-100"><p class="font-weight-bold mb-0 mr-1">Select Type</p></div>
    					<div class="w-100">
    						<select class="form-control">
							  <option>None Selected</option>
							</select>
						</div>
    				</div>
    				<div class="d-flex align-items-center px-2 border-right mb-2 col-12 col-lg-5">
    					<p class="w-100 font-weight-bold mb-0 mr-1">Select Type</p>
    					<p class="w-100 mb-0 mr-1"><a href="#" class="btn btn-block btn-primary">Code Type</a></p>
    					<p class="w-100 mb-0"><a href="#" class="btn btn-block btn-outline-primary">Non Code Type</a></p>
    				</div>
    				<div class="d-flex justify-content-between align-items-center px-2 col-12 col-lg-3">
						<div class="w-100"><p class="font-weight-bold mb-0 mr-2">Number of Type</p></div>
    					<div class="w-100"><select class="form-control">
						  <option>01</option>
						</select></div>
    				</div>
    			</div>    			
    		</div>
    		<div class="col-md-2 col-lg-2 bg-white py-2 d-md-flex align-items-center">
    			<div class="d-md-block d-flex d-lg-flex justify-content-between">
	    			<div class="w-100 mr-1 mb-2"><button type="button" class="btn btn-block btn-lg btn-outline-primary">Reset</button></div>
	    			<div class="w-100"><button type="button" class="btn btn-block btn-lg btn-primary">+</button></div>
	    		</div>
    		</div>
    	</div>
    </div>

Answer 2

Эта ссылка поможет вам: ссылка

Грид-система использует максимум 12 столбцов, имейте это в виду и делите столбцы соответствующим образом.

Однако, поскольку все ваши элементы находятся на одной линии, вы должны добавить =>

class="row"

, прежде чем начинать работу с сеткой.Вы поймете систему сетки с практикой, просто поиграйтесь со значениями ваших столбцов, и вы обязательно получите их.

ОБНОВЛЕНИЕ:

Посмотрите -->

<div class="container">
<div class="row">
    <div class="col-md-4">
        <span class="">1</span>
        <label type="text">Select Technology</label>
        <select value=""  class="selectpicker btn btn-labeled btn-start">
            <option value="">None Selected</option>
            <option value="">Hello </option>
            <option value="">World </option>
        </select>
    </div>

    <div class="col-md-4">
        <div class="row">
            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 class="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>

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

</div>