bootstrap在输入框组中嵌入按钮并并排显示

By | 2020年6月18日

bootstrap的输入框组是一个比较美观的设计,让输入框的可识别性变得更高;而最近遇到一个需求是将buuton按钮也放入输入框组中,和input框并排显示,实现效果如下:

bootstrap输入框组中添加button
bootstrap输入框组中添加button

实现方法代码:

<div class="input-group">
    <span class="input-group-addon">满减商品</span>
    <input type="number" id="fullMoney" class="form-control" placeholder="满">
    <span class="input-group-addon">¥</span>
    <input type="number" id="reduceMoney" class="form-control" placeholder="减">
    <span class="input-group-addon">¥</span>
    <button type="button" id="openChooseFullAndReduceModal" data-type="2" data-actobj="" style="border-radius: 0;" class="btn btn-success form-control">选择商品</button>
    <span class="input-group-addon"></span>
    <button type="button" id="lastViewFullAndReduceGoods" data-type="2" style="border-top-left-radius: 0;border-bottom-left-radius: 0;" class="btn btn-info form-control">
        <i>0</i>
    查看商品
    </button>
</div>

当然,当你在你的网页中加入上面代码之前需要引入bootstrap文件;

上面代码你会发现在两个button之间我加入了这么一串标签:

<span class="input-group-addon"></span>

这是为了让两个button在输入框组中并排显示,我想到最简单的方法就是这样了,如果有哪位高手知道去掉中间这么一块标签的话,麻烦留言,大家分享一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注