Twitter bootstrap 3 引导选择会溢出除此之外的内容
我正在尝试使用引导选择插件获得9个下拉列表。 下拉列表显示在三列中。 每个下拉列表都有一个标签。 每个下拉列表都有一个擦除按钮（输入组btn）。 您可以为下拉列表选择多个选项 现在，当我在左下拉列表中选择许多选项时，选项列表会溢出右下拉列表的标签 是否可以切断选项列表，以便除下拉列表外的所有内容都保持可见？ 我认为“dropdown align right”选项可以完成这项工作，但在我的示例中似乎不起作用 我使用bootstrap3.3.7、bootstrapselect1.12.1和jquery1.9.1 代码如下：Twitter bootstrap 3 引导选择会溢出除此之外的内容,twitter-bootstrap-3,Twitter Bootstrap 3,我正在尝试使用引导选择插件获得9个下拉列表。 下拉列表显示在三列中。 每个下拉列表都有一个标签。 每个下拉列表都有一个擦除按钮（输入组btn）。 您可以为下拉列表选择多个选项 现在，当我在左下拉列表中选择许多选项时，选项列表会溢出右下拉列表的标签 是否可以切断选项列表，以便除下拉列表外的所有内容都保持可见？ 我认为“dropdown align right”选项可以完成这项工作，但在我的示例中似乎不起作用 我使用bootstrap3.3.7、bootstrapselect1.12.1和jquer
`<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_1" class="control-label col-md-5">Select 1</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_1" name="select_1" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_2" class="control-label col-md-5">Select 2</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_2" name="select_2" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_3" class="control-label col-md-5">Select 3</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_3" name="select_3" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_4" class="control-label col-md-5">Select 4</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_4" name="select_4" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_5" class="control-label col-md-5">Select 5</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_5" name="select_5" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_6" class="control-label col-md-5">Select 6</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_6" name="select_6" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_7" class="control-label col-md-5">Select 7</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_7" name="select_7" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_8" class="control-label col-md-5">Select 8</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_8" name="select_8" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_9" class="control-label col-md-5">Select 9</label>
<div class="col-md-7">
<div class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_9" name="select_9" multiple>
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>`
`
示例代码
选择1
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择2
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择3
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择4
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择5
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择6
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择7
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
选择8
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
...
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample code</title>
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectpicker").each(function() {
var self = this;
$(self).selectpicker({
"selectedTextFormat": "count>1",
"countSelectedText": function(count,total) {
return $(self).val()[0] + " ...";
}
});
}); // end each
}); // end ready
</script>
</head>
<body>
<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_1" class="control-label col-md-5">Select 1</label>
<div class="col-md-7">
<div id="select_1_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_1_container" id="select_1" name="select_1" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_2" class="control-label col-md-5">Select 2</label>
<div class="col-md-7">
<div id="select_2_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_2_container" id="select_2" name="select_2" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_3" class="control-label col-md-5">Select 3</label>
<div class="col-md-7">
<div id="select_3_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_3_container" id="select_3" name="select_3" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_4" class="control-label col-md-5">Select 4</label>
<div class="col-md-7">
<div id="select_4_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_4_container" id="select_4" name="select_4" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_5" class="control-label col-md-5">Select 5</label>
<div class="col-md-7">
<div id="select_5_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_5_container" id="select_5" name="select_5" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_6" class="control-label col-md-5">Select 6</label>
<div class="col-md-7">
<div id="select_6_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_6_container" id="select_6" name="select_6" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_7" class="control-label col-md-5">Select 7</label>
<div class="col-md-7">
<div id="select_7_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_7_container" id="select_7" name="select_7" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_8" class="control-label col-md-5">Select 8</label>
<div class="col-md-7">
<div id="select_8_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_8_container" id="select_8" name="select_8" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="select_9" class="control-label col-md-5">Select 9</label>
<div class="col-md-7">
<div id="select_9_container" class="input-group">
<select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_9_container" id="select_9" name="select_9" title="" multiple>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">...</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>