登录页面布局问题

18670236210

如图：登录页面我需要添加验证码，但是X5的布局方式我弄了很久 就是不能把他们弄好，求给出一段源码，期待效果是（前面一个图标，后面是验证码图片，接着是输入框，在后面一个A标签，整成一行，高度都相同看上去整齐）


我先给出我这边的页面源码吧，
<?xml version="1.0" encoding="utf-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window portal-login-page" component="$UI/system/components/justep/window/window" sysParam="false">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:44px;left:43px;"
   >
    <div component="$UI/system/components/justep/data/data" xid="langs" idColumn="fName" autoLoad="true">
      <column name="fName" type="String" label="名称"/>  
      <column name="fLabel" type="String" label="显示名称"/>  
      <rule xid="rule1"/>  
      <data><![CDATA[
      [{fName:'zh_CN', fLabel:'中文'}]
      ]]></data>
    </div>
  </div>  
  <span component="$UI/system/components/justep/windowReceiver/windowReceiver" xid="receiver" style="left:19px;top:14px;"></span><div class="page-login" xid="pageLogin">
    <div class="page-header" style="text-align: center;font-size: 24px; margin-top:0; padding-top: 24px;" xid="pageHeader">
      <div xid="divTitle" class="form-container" align="center">登录BeX5</div>
    </div>  
    <div class="page-body" style="padding: 10px;" xid="pageBody">
      <div class="form-container" style="max-width: 420px;margin: 0 auto;padding: 0 15px;">
        <form class="form-horizontal ng-pristine ng-valid">
          <fieldset>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-envelope"/>
                </span>  
                <input component="$UI/system/components/justep/input/input" class="form-control"
                  xid="name" placeHolder="用户名"/>
              </div>
            </div>  
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-lock"/>
                </span>  
                <input component="$UI/system/components/justep/input/password"
                  class="form-control" xid="password" placeHolder="密码"/>
              </div>
            </div>  
            <div class="form-group" xid="formGroup1">
   <div class="col-sm-5 input-group" xid="col6">
    <span class="input-group-addon" xid="span5">
     <span class="glyphicon glyphicon-lock" xid="span6"></span></span>
    <span xid="span7" class="input-group-sm"><img id="validateImg" xid="validateImg" src="">

    </img></span>
  <span xid="span8" class="input-group"><input component="$UI/system/components/justep/input/input" class="form-control" xid="verifyCode" placeHolder="验证码" style="width:106px;"/></span></div>
  </div><div class="form-group" xid="formGroup4">
   <div class="col-sm-2" xid="col10">






   <span class="input-group-addon" xid="span2"><![CDATA[验证码]]></span></div>
   <div class="col-sm-3" xid="col5"></div><div class="col-sm-4" xid="col3"></div>
  <div class="col-sm-3" xid="col4"><a href="javascript:reloadCode();">看不清楚</a></div>
  </div><div class="form-group" style="display:none">
              <div class="input-group">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-lock"/>
                </span>  
                <input component="$UI/system/components/justep/input/input"
                  class="form-control" xid="client" placeHolder="租户"/>
              </div>
            </div>  
            <div class="form-group">
              <a component="$UI/system/components/justep/button/button" class="btn btn-default btn-block"
                label="登录" xid="login">
                <i xid="i1"/>  
                <span xid="span1">登录</span>
              </a>
            </div>  
            <div class="form-group">
              <div component="$UI/system/components/justep/row/row" class="row"
                xid="row1">
                <div class="col-xs-3" xid="col1">
                  <span component="$UI/system/components/justep/button/checkbox"
                    class="x-checkbox" xid="remember" label="记住我"/>
                </div>  
                <div class="col-xs-3" xid="col2">
                  <span component="$UI/system/components/justep/button/checkbox"
                    class="x-checkbox" xid="autoLogin" label="自动登录"/>
                </div>
                <div class="x-col lang-switch" xid="col9" style="display:none;">
                  <a component="$UI/system/components/justep/button/button"
                    class="btn btn-link show-langs" label="显示语言选择" xid="showLangBtn" style="padding-top: 0px;margin-top:-2px;float:right;">
                    <i xid="i3"/>  
                    <span xid="span3">显示语言选择</span>
                  </a>
                  <a component="$UI/system/components/justep/button/button"
                    class="btn btn-link hide-langs" label="隐藏语言选择" xid="hideLangBtn" style="padding-top: 0px;margin-top:-2px;float:right;display:none;">
                    <i xid="i11"/>  
                    <span xid="span33">隐藏语言选择</span>
                  </a>
                </div>


                </div>
            </div>
            <div class="form-group login-lang" style="display:none;">
              <div class="input-group">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-flag"/>
                </span>  
              <select component="$UI/system/components/justep/select/select" class="form-control"
                xid="lang" bind-options="langs" bind-optionsLabel="fLabel" bind-optionsValue="fName"/>
              </div>
            </div>  

   </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

jishuang

放一个formGroup，然后就留一个col，在col中放row，自己设置4列，每列的宽度占比自己设置

18670236210

jishuang 发表于 2018-1-25 17:11
放一个formGroup，然后就留一个col，在col中放row，自己设置4列，每列的宽度占比自己设置 ...

按照你说的弄的，你看箭头标注的地方，明显的不可能跟上面两行一样这样对其，太丑了。

jishuang

可以自己设置left等样式控制