한 열에 텍스트 영역이있을 때 부트 스트랩 행에서 글꼴 멋진 아이콘을 세로로 배치하는 방법

DennisT

맨 오른쪽 열의 플래그가 "행"의 중간에 수직으로 배치되기를 원합니다.

부트 스트랩 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="">&nbsp;</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>&nbsp; 
                        </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="">&nbsp;</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>&nbsp;
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

당신은 볼 수 있습니다 : https://jsfiddle.net/sugandhnikhil/vdhmjn17/

감사!!

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관