CSS - 我的 Bootstrap 选择 jQuery 插件的宽度和对齐问题答案

【问题标题】：CSS - My issues with width and alignment of Bootstrap select jQuery pluginCSS - 我的 Bootstrap 选择 jQuery 插件的宽度和对齐问题
【发布时间】：2016-05-22 10:13:27
【问题描述】：

这可能是一种微不足道的做法，但我似乎无法处理它。

我正在使用 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>

我这里有两个问题：

我希望选择选项居中对齐，但我不能！
我也无法减小“月份”输入的大小！

请帮忙！谢谢！

【问题讨论】：

你能把它扔进一个codepen (codepen.io)——或者至少显示你的CSS吗？
@ryantdecker 我用我所有的 html 文件更新了帖子！

标签： jquery css twitter-bootstrap bootstrap-select

【解决方案1】：

bootstrap-select 的 CSS 看起来相当笨拙，因此您必须以相当高的特异性覆盖...因此，最简单的做法是在包装月份选择的 div 中添加一个 ID你可以专门针对它。（假设您不希望所选项目的大小与月份 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
}
*/

Codepen：http://codepen.io/anon/pen/KzOpGJ

【讨论】：

非常感谢！这就是我一直在寻找的！