Bootstrap 3 multiselect plugin as form element

问题

I'm trying to add multiselect plugin to my form. I've managed to get everything working just fine (http://jsfiddle.net/Misiu/t2qaP/), but I would like to get that select to be 100% width.
I can add css by hand:

 .btn-group, .btn-group .multiselect {
    width: 100% !important;
}

but maybe there is better way of doing this with bootstrap?

here is my demo: http://jsfiddle.net/Misiu/t2qaP/

回答1:

Again hello ;) See

UPDATED

http://jsfiddle.net/t2qaP/13/

select.multiselect,
select.multiselect + div.btn-group,
select.multiselect + div.btn-group button.multiselect,
select.multiselect + div.btn-group.open .multiselect-container{
    width:100% !important;
}

UPDATED 2 You need to add buttonClass to multiselect options. But why do it? Looks so good. http://jsfiddle.net/t2qaP/14/

$('.multiselect').multiselect({
    includeSelectAllOption: true,
    buttonClass: 'form-control'
});

回答2:

You might want to use buttonWidth option if you do not wish to modify css. See below example.

$('.multiselect').multiselect({
    includeSelectAllOption: true,
    buttonWidth: '411px'// here you need to specify width value
});

Demo Fiddle

回答3:

http://jsfiddle.net/t2qaP/12/

$('.input-daterange').datepicker();
$('.multiselect').multiselect({
    includeSelectAllOption: true,
    buttonClass : "col-sm-12"
});

The multiselect plugin allow to manage this.

来源：https://stackoverflow.com/questions/20803189/bootstrap-3-multiselect-plugin-as-form-element