css - 使搜索全宽的最佳方式

Question

第一次使用这个组件，希望搜索输入框全宽。

实现此目标的最佳方法是什么？是纯 CSS，还是脚本中有一个选项？

这是我当前生成表格的脚本

   initializeBootstrapTable() {
            let $table = jQuery(this.$refs.table);

            jQuery.fn.bootstrapTable.columnDefaults.formatter = function(value, row, index) {
                if(typeof(value) === 'boolean') {
                    return value ? 'Yes' : 'No';
                }

                if(value === 'ug') {
                    return 'UG';
                }

                if(value === 'pg') {
                    return 'PG';
                }

                return value;
            };

            $table.bootstrapTable({
                data: this.applicants,
                showColumns: true,
                toolbarAlign: 'right',
                buttonsAlign: 'right',
                pagination: true,
                search: true,
                iconsPrefix: 'fa',
                icons: {
                    paginationSwitchDown: 'fa-collapse-down icon-chevron-down',
                    paginationSwitchUp: 'fa-collapse-up icon-chevron-up',
                    refresh: 'fa-refresh icon-refresh',
                    toggle: 'fa-list-alt icon-list-alt',
                    columns: 'fa-th icon-th',
                    detailOpen: 'fa-plus icon-plus',
                    detailClose: 'fa-minus icon-minus'
                }
            });

            $table.on('click-row.bs.table', (e, row) => this.handleApplicantSelection(row));
        }

谢谢!

Answer 1

似乎没有删除 float 的选项，它可以选择向左或向右查看选项。相反，添加 BS4 无 float 类。 JS在这里是一个很好的方法。

Vanilla :

var d = document.getElementById("my-search");
d.className += " float-none";

jQuery

$("#my-search").addClass('float-none');

纯 CSS

#my-search {
  float:none;
}

如果必须，您也可以使用 !important 规则。