bootstrap怎么让button和input并列一行

1.由于实习好久没时间写博客了,今天研究毕业设计的前端页面发现,想实现一个密码框以及旁边有一个可以是否显示的按钮用来查看密码,解决了在此记录一下

没改善之前效果如下图:

2.确定需要实现的功能:a.实现显示按钮显示密码的功能;b.实现密码和实现按钮在一行的(顺便提醒下,本人使用的是bootstrap的样式!)

a.实现显示按钮实现密码的功能:

前端密码框的代码:

<div class="form-group">
         <label>交易密码</label>
          <input type="password" class="form-control form-control-pwd" name="paypwd"
           id="paypwd" placeholder="您的交易密码(6位数字)还未设置"
         th:value="${user.paypwd}" style="width: 86%">
     <input type="button" id="btn" class="btn-blue" value="点击显示密码" />
   <span class="help-block"></span>
 </div>

js方法代码(当鼠标点击显示密码,离开隐藏密码):

<script>
        window.onload=function(){
              var btn=document.getElementById("btn");
              var paypwd=document.getElementById("paypwd")
              btn.onmousedown=function(){
              paypwd.type="number"
              };
              btn.onmouseup=btn.onmouseout=function(){
              paypwd.type="password"
               }
        }
     </script>

效果如图:

未点击时:

点击时:

b.实现按钮和文本框在同一行(其实上面已经实现了,但是我还是得把代码分享出来,嘿嘿!)

大家要注意

form-control有两个属性影响换行.

.form-control {
width:100%;
display: block;
}

我们可以新增一个class,例如我这是**form-control-pwd

.form-control-pwd {
width:200px;
display:inline;
}

这个css要放到bootstrap.css下面,然后重新编译页面,大功告成!

如有错误,请大佬们指出让本萌新改正!下次见啦!

posted @   我是一个邓疯子  阅读(1556)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
ヾ(≧O≦)〃嗷~,

这是回到顶部的路哦

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示