맨 오른쪽 열의 플래그가 "행"의 중간에 수직으로 배치되기를 원합니다.
부트 스트랩 3 솔루션 찾기
내 코드는 다음과 같습니다.
<div class="panel panel-primary" id="panelid">
<div class="panel-heading">
<h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
</div>
<div class="panel-body">
<div class="well well-sm ">
<div class="row form-row">
<div class="form-group col-xs-11 col-sm-4 col-lg-3">
<label class="field-label control-label" id="Field1_Label" for="Field1">Field 1</label>
<sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" style="cursor:default" aria-label="A Required Field"></i></sup>
<select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
<option value=""> </option>
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
</div>
<div class="form-group col-xs-11 col-sm-7 col-lg-8">
<label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1 Comments</label>
<textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
</div>
<div class="col-xs-1">
<i class="text-danger fa fa-flag fa-2x fa-fw"></i>
</div>
</div>
</div>
</div>
</div>
이거 야:
<div class="panel panel-primary" id="panelid">
<div class="panel-heading">
<h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
</div>
<div class="panel-body">
<div class="well well-sm ">
<div class="container">
<div class="row>">
<div class="form-group">
<div class="col-xs-11 col-sm-4 col-lg-3">
<label class="field-label control-label" id="Field1_Label" for="Field1">Field
1</label>
<sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger"
aria-hidden="true" style="cursor:default"
aria-label="A Required Field"></i></sup>
<select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
<option value=""> </option>
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-11 col-sm-7 col-lg-8">
<label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1
Comments</label>
<textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1">
<i class="glyphicon glyphicon-flag" style="color: #A54142; font-size: 20px; padding-top: 30px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
당신은 볼 수 있습니다 : https://jsfiddle.net/sugandhnikhil/vdhmjn17/
감사!!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다