CSS和Struts 2格式的对齐 [英] CSS and alignement in Struts 2 form

问题描述

在使用Struts2之前，我有以下代码：

 < form class =form-horizo​​ntalrole =form > 
 
< div style =margin-bottom：25pxclass =input-group> 
< span class =input-group-addon>< i class =glyphicon glyphicon-user>< / i>< / span> 
< input id =login-usernametype =textclass =form-controlplaceholder =Identifiantname =usernamevalue =required autofocus> 
< / div> 
 
< div style =margin-bottom：25pxclass =input-group> 
< span class =input-group-addon>< i class =glyphicon glyphicon-lock>< / i>< / span> 
< input id =login-passwordtype =passwordplaceholder =Mot de passeclass =form-controlname =passwordrequired> 
< / div> 
 
< div style =margin-top：10pxclass =form-group> 
< div class =col-sm-12 controls> 
< button id =btn-loginclass =btn btn-successtype =submit> Se connecter< / button> 
< / div> 
< / div> 
< / form> 
  

我有以下几种：

我试图插入struts标签，所以我现在有这个代码：

 < s：form action =actionAmethod =postcssClass = 形式水平> 
< div style =margin-bottom：25px;类=输入的基团> 
< span class =input-group-addon>< i class =glyphicon glyphicon-user>< / i>< / span> 
 < / div> 
 
< div style =margin-bottom：25pxclass =input-group> 
< span class =input-group-addon>< i class =glyphicon glyphicon-lock>< / i>< / span> 
 < / div> 
 
< div style =margin-top：10pxclass =form-group> 
< div class =col-sm-12 controls> 
< s：submit key =submitcssClass =btn btn-successvalue =Se connecter/> 
< / div> 
< / div> 
< / s：form> 
  

问题在于显示屏已经改变：

你知道为什么显示不一样？

解决方案

视图不一样，因为文档不一样。 Struts2 UI标签在场景后面生成一些HTML和JavaScript内容，您可以在浏览器源窗口中看到该内容。如果您希望尽可能减少更改，可以在表单标记上使用 simple 主题

 < s：form action =actionAmethod =postcssClass =form-horizo​​ntaltheme =simple> 
  

或全局配置 struts.xml

 < constant name =struts.ui.themevalue =simple/> 
  

您可以在 Struts 2 Themes 。

Before using Struts2 I had the following code :

<form class="form-horizontal" role="form">

    <div style="margin-bottom: 25px" class="input-group">
         <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
         <input id="login-username" type="text" class="form-control" placeholder="Identifiant" name="username" value="" required autofocus>
    </div>

    <div style="margin-bottom: 25px" class="input-group">
         <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
         <input id="login-password" type="password" placeholder="Mot de passe" class="form-control" name="password" required>
    </div>

    <div style="margin-top:10px" class="form-group">
         <div class="col-sm-12 controls">
              <button id="btn-login" class="btn btn-success" type="submit">Se connecter</button>
         </div>
    </div>
</form>

And I had the following :

I tried to insert struts tags, so I have this code now :

<s:form action="actionA" method="post" cssClass="form-horizontal">
    <div style="margin-bottom: 25px;" class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <s:textfield cssClass="form-control" name="identifiant" placeholder="Identifiant" required="true"/>
    </div>

    <div style="margin-bottom: 25px" class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <s:password cssClass="form-control" name="motDePasse" placeholder="Mot de passe" required="true"/>
    </div>

    <div style="margin-top:10px" class="form-group">
        <div class="col-sm-12 controls">
            <s:submit key="submit" cssClass="btn btn-success" value="Se connecter"/>
        </div>
    </div>
</s:form>

The problem is that the display has changed :

Do you know why the display is not the same ?

解决方案

The view is not the same because the document is not the same. Struts2 UI tags generate some HTML and javascript content behind the scene that you can see looking in the browser source window. If you want to keep changes as less as possible you can use simple theme on the form tag

<s:form action="actionA" method="post" cssClass="form-horizontal" theme="simple">

or configure it globally in struts.xml

<constant name="struts.ui.theme" value="simple"/>

You can read more about themes in Struts 2 Themes.

这篇关于CSS和Struts 2格式的对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！