Css 如何更改此ui选择元素的样式表？（角度）

我用angular编写了一个小程序，使用了ui选择元素。问题是搜索栏太长了，我没有找到减少它的方法。通常，我们有一些宽度属性，你可以更改，但css代码太复杂了，我没有找到如何管理它。我想做的是在同一条线上保存三个小节

我从ui选择的官方页面复制了这个示例，所以它包含了很多我不理解的css内容，我对css或引导不太了解

index.html中的style元素如下所示：

  <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中找到：

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

已编辑2如何将col xx nn属性与引导一起使用

xx指示要在哪个视图中应用属性：

xs：超小型设备

sm：小型设备

md：中型设备

lg:lg设备

nn表示元素将占用的列总数为12。请参阅以阅读完整的文档

这就是你的代码应该是什么样的

<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>

检查一下这个工作装置

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

/**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;
}

重要的！：

请注意，如果您有一个名称过长的选项 需要的宽度超过您所需的宽度，在这种情况下，200px不会 在所选选项中完全显示，此外，您还必须 滚动x轴，以便在下拉列表中完全读取 列表 当您创建一个ui选择项时，它将为其所有内容生成一个div，并且有三个栏，所有这些div可能都会显示，一个在其他div的下面。提示：您可以使用引导类来解决这个问题：col-md-4用于封装每个ui选择的每个div

---

您能告诉我如何更改select.css文件吗？因为它太长了，我认为它包含了很多无用的行。请你告诉我如何使用limiTo过滤器在plunker代码中。我不知道如何使用它。谢谢请看我的答案。希望有帮助！给出一些反馈：您能告诉我如何使用col-md-4类让树ui选择同一行的项目吗？不是每行都有。我不擅长引导，这将是我的最后一个问题！谢谢看到我的答案和plnkr编辑。请注意，如果您在小型或中型设备中看到html内容，则这些条实际上可能会一个接一个地放置。这不应该发生在中型或大型设备上。希望有帮助！萨拉曼卡，如果我的回答对你有用，你考虑过吗？

/**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;
}