我是网络开发的新手。在这里,我正在尝试开发,
这是一个模态主体。所以,我所做的是
<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实现这种结构。
这是我尝试过的。
有人可以帮我吗?
任何建议都会很有帮助
谢谢。
答案 0 :(得分:0)
根据您共享的代码,meta
标签具有属性shrink-to-fit=no
导致您的视口无法在不同的设备宽度上进行调整。只需从meta标签中删除shrink-to-fit=no
,它就可以解决此问题。有关详细说明,请查看此link。