bootstrap如何把表单select input button弄在一行

        bootstrap很多折叠样式css都已经写好,可以直接用,很方便。但是,如果遇到一些bootstrap文档里面没有的例子,估计很多初学者都懵了,然后会折腾很久也未见得有效。今天主要讲如何把select input button弄在一行,因为直接用bootstrap的form-control样式会出现换行!只需要解决为何换行即可;form-control有个属性:width:100%,这个是产生换行的原因,所以覆盖form-control的width:100%样式为width:auto;即可。例子如下:

<div class="form-group">
    <div class="input-group col-xs-12">
        <div class="input-group-btn">
            <select name="type" class="form-control" style="width: auto;">
                <option value="1">全网</option>
                <option value="2">本站</option>
            </select>
        </div>
        <input type="text" name="keyword" id="keyword" class="form-control" placeholder="请您输入关键词">
        <span class="input-group-btn">
            <button class="btn btn-success" id="search_submit" type="submit">Go</button>
        </span>
    </div>
</div>


  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是一个基于 BootstrapSelect2 的表单页面,可以添加多个关键词: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap & Select2 Form Demo</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> </head> <body> <div class="container mt-3"> <h1>Bootstrap & Select2 Form Demo</h1> <form> <div class="form-group"> <label for="title">标题</label> <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" required> </div> <div class="form-group"> <label for="keywords">关键词</label> <select id="keywords" class="form-control" multiple="multiple" name="keywords[]"></select> </div> <button type="button" class="btn btn-primary" id="add-keyword-btn">添加关键词</button> <button type="submit" class="btn btn-success">提交</button> </form> </div> <template id="keyword-template"> <div class="form-group keyword-group"> <input type="text" class="form-control keyword-input" name="keyword" placeholder="请输入关键词" required> <button type="button" class="btn btn-danger remove-keyword-btn">移除</button> </div> </template> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script> <script> $(document).ready(function() { // 初始化 Select2 $('#keywords').select2(); // 添加关键词按钮点击事件 $('#add-keyword-btn').click(function() { // 复制关键词模板并添加到表单中 var keywordTemplate = $('#keyword-template').html(); $('.form-group:last').after(keywordTemplate); // 初始化新添加的关键词输入框和移除按钮 var $newKeywordGroup = $('.keyword-group:last'); $newKeywordGroup.find('.keyword-input').select2(); $newKeywordGroup.find('.remove-keyword-btn').click(function() { $newKeywordGroup.remove(); }); }); }); </script> </body> </html> ``` 在这个示例中,我们使用了 Bootstrap表单组件和按钮,以及 Select2 的多选下拉框。我们在表单中添加了一个关键词下拉框和一个添加关键词的按钮,点击按钮会在表单中添加一个新的关键词输入框和移除按钮。我们还使用了一个 `<template>` 元素来定义关键词输入框和移除按钮的 HTML 模板,方便复用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值