CSS - 我的 Bootstrap select jQuery 插件的宽度和对齐问题
CSS - My issues with width and alignment of Bootstrap select jQuery plugin
这可能是一个微不足道的练习,但我似乎无法处理它。
我正在使用 Twitter Bootstrap 3.3.6 和 jQuery 1.12.0,我也在使用 "bootstrap-select" jQuery plugin :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</head>
<body>
<br>
<div>
<div class="panel panel-primary">
<div class="panel-heading ">
<center>
<select class="selectpicker" id="headingSelect">
<option>Item 1</option>
<option selected>Item 2</option>
<option>Item 3</option>
</select>
</center>
</div>
<div class="panel-body">
<center>
<div class="form-inline">
<div class="form-group">
<label class="control-label" for="age">Age:</label>
<input type="text" class="form-control" id="age" style="width:45px;">
</div>
<div class="form-group">
<label class="control-label" for="Month">Month:</label>
<select id="Month" class="selectpicker">
<option>Month1</option>
<option selected>Month2</option>
<option>Month3</option>
</select>
</div>
<div class="form-group">
<label for="Year">Year:</label>
<input type="text" class="form-control" id="Year" style="width:60px;">
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
我这里有两个问题:
我希望 select 选项居中对齐,但我做不到!
我也无法减小"Month"输入的大小!
请帮忙!谢谢!
bootstrap-select 的 CSS 看起来很笨拙,所以你必须非常明确地覆盖......因此,最简单的事情要做的是向包装月份 select 的 div 添加一个 ID,以便您可以专门针对它。 (假设您不希望商品 select 的尺寸与您在月份 div 的自定义尺寸相同)。
如果您擅长添加 ID,这里是您需要的额外 CSS:
.dropdown-menu>li>a {
text-align:center;
}
#month-select .bootstrap-select.btn-group {width:auto;}
#month-select.bootstrap-select.btn-group .dropdown-toggle,
#month-select.bootstrap-select.btn-group .dropdown-menu {
max-width:100px; /* or whatever width you want the select and dropdown to be */
min-width:100px; /* or whatever width you want the select and dropdown to be */
}
/* if you want to center the label in the dropdown button, not just the options
in the list, uncomment this:
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
text-align:center;
padding-left:12px
}
*/
这可能是一个微不足道的练习,但我似乎无法处理它。
我正在使用 Twitter Bootstrap 3.3.6 和 jQuery 1.12.0,我也在使用 "bootstrap-select" jQuery plugin :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</head>
<body>
<br>
<div>
<div class="panel panel-primary">
<div class="panel-heading ">
<center>
<select class="selectpicker" id="headingSelect">
<option>Item 1</option>
<option selected>Item 2</option>
<option>Item 3</option>
</select>
</center>
</div>
<div class="panel-body">
<center>
<div class="form-inline">
<div class="form-group">
<label class="control-label" for="age">Age:</label>
<input type="text" class="form-control" id="age" style="width:45px;">
</div>
<div class="form-group">
<label class="control-label" for="Month">Month:</label>
<select id="Month" class="selectpicker">
<option>Month1</option>
<option selected>Month2</option>
<option>Month3</option>
</select>
</div>
<div class="form-group">
<label for="Year">Year:</label>
<input type="text" class="form-control" id="Year" style="width:60px;">
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
我这里有两个问题:
我希望 select 选项居中对齐,但我做不到!
我也无法减小"Month"输入的大小!
请帮忙!谢谢!
bootstrap-select 的 CSS 看起来很笨拙,所以你必须非常明确地覆盖......因此,最简单的事情要做的是向包装月份 select 的 div 添加一个 ID,以便您可以专门针对它。 (假设您不希望商品 select 的尺寸与您在月份 div 的自定义尺寸相同)。
如果您擅长添加 ID,这里是您需要的额外 CSS:
.dropdown-menu>li>a {
text-align:center;
}
#month-select .bootstrap-select.btn-group {width:auto;}
#month-select.bootstrap-select.btn-group .dropdown-toggle,
#month-select.bootstrap-select.btn-group .dropdown-menu {
max-width:100px; /* or whatever width you want the select and dropdown to be */
min-width:100px; /* or whatever width you want the select and dropdown to be */
}
/* if you want to center the label in the dropdown button, not just the options
in the list, uncomment this:
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
text-align:center;
padding-left:12px
}
*/