bootstrap怎么让button和input并列一行


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

没改善之前效果如下图:

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

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

前端密码框的代码:

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


效果如图:

未点击时:

点击时:

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

大家要注意

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

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

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

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

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

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

相关