Структура HTML Не работает на разных устройствах

Question

Я новичок в веб-разработке.Здесь я пытаюсь развить,

Это модальное тело.Итак, то, что я сделал, это

<div className="row modalRowMargin textStyle" >
              <div className="col-1 col-md-1 border border-primary text-vertical-center" >
                <h5 className="textStyleOfQuestionLabel">Q{props.questionNo} </h5>
              </div >

              <div className="col-11 col-md-11 border" >
                < textarea className="form-control textarea border-0" style={{ resize: 'none' }} onChange={(e) => { props.onChangeQuestion(e, "question") }} > </textarea>
              </div >
            </div>

            <div className="row modalRowMargin rowTopMargin" >
              <div >
                <span >
                  Answer Choice </span> </div > </div>

            <div className="row modalRowMargin rowTopMargin " >
              <div className="col-6 col-md-6" >

                <div className="row " >

                  <div className="col-2  border border-primary text-vertical-center"
                    style={{ borderColor: props.setDefaultColor(0), color: props.setDefaultColor(0) }} >

                    <h6 className="textStyleOfLabel">A </h6>
                  </div > <div className="col-7  border"
                    style={
                      { background: props.setDefaultColor(0) }
                    } >

                    < textarea class="form-control  border-0" onChange={
                      (e) => { props.onChangeQuestion(e, "opt1") }
                    }
                      style={
                        { background: props.setDefaultColor(0), resize: 'none' }
                      } > </textarea>
                  </div>
                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 0} onClick={() => { props.changeColor(0) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>
                  {/* <span > Correct </span> 
        <div className="row marginforCheckbox">
        <input checked={props.activeOption === 0} onClick={() => { props.changeColor(0)}} type="checkbox" id="blankCheckbox" />               
        </div>                                                                                                    */}
                </div>
              </div >

              <div className="col-6 col-md-6" >
                <div className="row" >
                  <div className="col-2  border border-primary  text-center text-vertical-center" style={{ borderColor: props.setDefaultColor(1), color: props.setDefaultColor(1) }} >
                    <h6 className="textStyleOfLabel">  B </h6>

                  </div >
                  <div className="col-7  border" style={{ background: props.setDefaultColor(1) }} >
                    <textarea class="form-control border-0" onChange={(e) => { props.onChangeQuestion(e, "opt2") }} style={{ background: props.setDefaultColor(1), resize: 'none' }} ></textarea>

                  </div>
                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 1} onClick={() => { props.changeColor(1) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>

                </div> </ div >

            </div>

            <div className="row ml-0 mr-0 d-flex justify-content-around rowTopMargin" >

              <div className="col-6 col-md-6" >

                <div className="row" >

                  <div className="col-2  border border-primary  text-center text-vertical-center" style={{ borderColor: props.setDefaultColor(2), color: props.setDefaultColor(2) }} >

                    <h6 className="textStyleOfLabel">  C </h6>
                  </div>
                  <div className="col-7 border" style={{ background: props.setDefaultColor(2) }} >
                    <textarea class="form-control border-0" onChange={(e) => { props.onChangeQuestion(e, "opt3") }} style={{ background: props.setDefaultColor(2), resize: 'none' }} aria-label="With textarea" > </textarea>
                  </div >

                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 2} onClick={() => { props.changeColor(2) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>
                </div>
              </div >
              <div className="col-6 col-md-6" >
                <div className="row" >
                  <div className="col-2  border border-primary  text-center text-vertical-center" style={{ borderColor: props.setDefaultColor(3), color: props.setDefaultColor(3) }} >
                    <h6 className="textStyleOfLabel"> D </h6>
                  </div >
                  <div className="col-7  border" style={{ background: props.setDefaultColor(3), resize: 'none' }} >
                    <textarea class="form-control border-0" onChange={(e) => { props.onChangeQuestion(e, "opt4") }} style={{ background: props.setDefaultColor(3), resize: 'none' }} > </textarea>
                  </div >
                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 3} onClick={() => { props.changeColor(3) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>
                </div>
              </div >
            </div>
          </div>

Мой css

saveButtonStyle{
background-color: #20B2AA;
color: white;
margin:0 auto;
    display:block;
}

.text-vertical-center{
    display:flex;
    align-items:center ;
    justify-content: center;
}

.textStyleOfLabel{
    font-size:22px;
    font-weight:bold;
}

.textStyleOfQuestionLabel{
    font-size:26px;
    font-weight:bold;
}

.checkboxStyle{
    display:flex;
    justify-content: center;
}
.containerOfcustomCheckbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 16px;
}

/* Hide the browser's default checkbox */
.containerOfcustomCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    outline: 2px solid #20B2AA;
}

/* On mouse-over, add a grey background color */
.containerOfcustomCheckbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a new background */
.containerOfcustomCheckbox input:checked ~ .checkmark {
    background-color: #20B2AA;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerOfcustomCheckbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerOfcustomCheckbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.questionInput{
    text-align: center;
}
.textarea {
    display:inline-block;
    vertical-align:middle;
}
.modalfetchedInfoStyle{
    background-color: white;
}

Итак, здесь я сделал это, используя систему сетки начальной загрузки.

Но на самом деле я столкнулся с проблемамивид планшета.Я просто хочу иметь представление о том, как я могу достичь этой структуры, используя html css и bootstrap.

Это то, что я пробовал.

Может ли кто-нибудь помочь мне с этим?

Любое предложение будет очень полезно

Спасибо.

Answer 1

В соответствии с кодом, которым вы поделились, тег meta имеет атрибут shrink-to-fit=no, что приводит к тому, что ваш видовой экран не настраивается на другой ширине устройства.Просто удалите shrink-to-fit=no из метатега, и это должно решить проблему.Для подробного объяснения взгляните на эту ссылку .