zoukankan      html  css  js  c++  java
  • 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下:

     1 <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;">
     2                         <div class="form-group">
     3                             <label for="username" class="col-sm-2 control-label">用户名</label>
     4 
     5                             <div class="col-sm-6">
     6                                 <em style="color: red;">*</em>
     7                                 <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
     8                             </div>
     9                         </div>
    10                         <div class="form-group">
    11                             <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
    12                             <div class="col-sm-6">
    13                                 <em style="color: red;">*</em>
    14                                 <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
    15                             </div>
    16                         </div>

    出现的问题是*与input框不在同一水平位置上,如下图示

    解决方法:覆盖input标签的class=“form-control”,修改display为“inline”,原来的block会让div前后带上换行符,将width设置为90%(width原来为100%,需在引入bootstrap的css文件后引入自己写的css样式)

    display的两个取值

    在自己的css文件中修改如下

     1 .form-control {
     2                 display: inline;
     3                  90%;
     4                 height: 34px;
     5                 padding: 6px 12px;
     6                 font-size: 14px;
     7                 line-height: 1.42857143;
     8                 color: #555;
     9                 background-color: #fff;
    10                 background-image: none;
    11                 border: 1px solid #ccc;
    12                 border-radius: 4px;
    13                 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    14                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    15                 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    16                 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    17                 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    18             }

    修改后的页面,*与input框在同一行,效果如下

  • 相关阅读:
    java8 file转base64
    springboot下maven分环境打包
    maven加载src下的xml文件
    ue正则
    springboot 深坑
    解压版mysql 错误-mysql启动失败
    spring整合activeMQ
    maven分环境 打包
    logger日志配置
    hadoop安装
  • 原文地址:https://www.cnblogs.com/alphajuns/p/10575109.html
Copyright © 2011-2022 走看看