如何更改此 ui-select 元素的样式表？ （角度）

Question

我使用 ui-select 元素用 Angular 编写了一个小程序。问题是搜索栏实在是太长了，没找到怎么缩小。通常，我们有一些“宽度”属性，您可以为此进行更改，但是 css 代码太复杂了，我没有找到如何管理它。我想要做的是在同一行保存三个酒吧。

我从ui-select的官方页面复制了示例，所以里面包含了很多我看不懂的css内容，对css或者bootstrap也不是很了解...

index.html 中的样式元素就是这个：

  <style>
    body {
      padding: 15px;
    }

    .select2 > .select2-choice.ui-select-match {
      /* Because of the inclusion of Bootstrap */
      height: 29px;
    }

    .selectize-control > .selectize-dropdown {
      top: 36px;
    }
  </style>
</head>

他们的示例中包含一个巨大的 select.css 文件，您可以在我的 plunker 中找到该文件：http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview

• 您能告诉我如何减小搜索栏的宽度吗？
• 您能否告诉我如何从我的示例中未使用的 plunker 中包含的 select.css 中删除所有不必要的行？我不知道我怎样才能有效地做到这一点。我害怕删除重要的元素，我真的迷失在那个巨大的 css 文件中。

提前谢谢你！

Answer 1

修改了 2（如何使用 col-xx-nn）属性与引导程序

xx 表示您希望在哪个视图中应用该属性：

xs：超小型设备

sm：小型设备

md：中型设备

lg：lg 设备

nn 表示该元素将占据多少列（共 12 列）。请参阅http://getbootstrap.com/getting-started/ 阅读完整文档。

这就是你的代码的样子……

<div class="row">
     <!--First ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
       <!--ui-content-here--->
      </ui-select>
    </div>
    <!--Second ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
         <!--ui-content-here--->
      </ui-select>
    </div>
    <!--Third ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
         <!--ui-content-here--->
      </ui-select>
    </div>
</div>

已编辑

包含一个自定义 css 并放置这些规则。确保在 ui-select css 文件之后包含它以覆盖其规则：

.ui-select-container {
    max-width: 200px; /*put the desired width here!*/
}

.ui-select-bootstrap > .ui-select-match > .btn {
    max-width: 200px; /*put the desired width here!*/
}

.ui-select-bootstrap > .ui-select-choices {
    max-width: 200px; /*put the desired width here!*/
    overflow-x: scroll;
}

.ui-select-container .form-control {
    max-width: 200px;  /*put the desired width here!*/
}

检查这个工作 plunker http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview

在这个 plunker 中，规则位于 myOwnCss.css 文件中，我需要添加另一个自定义规则才能正确完成此操作，因为 ui-select 的其他一些默认样式。见下文

/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
  color: black;
  background-color: white;
}

重要！：

• 请注意，如果您有一个名称太长的选项（它 需要超过你想要的宽度，在这种情况下是 200 像素）它不会 完全显示在所选选项中，此外您还必须 滚动 x 轴以便在下拉列表中完整阅读 列表。
• 当您创建一个 ui-select 项目时，它会为其所有内容生成一个 div，并且通过三个条形，所有这些 div 可能都会显示出来，一个在其他的下方。 （提示：您可以使用引导类解决此问题：col-md-4 用于包装每个 ui-select 的每个 div）