如何更改此UI选择元素的样式表?(角)

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）与bootstrap

XX 指示您要应用属性的视图：

XS ：超级small设备

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选择的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选择的其他一些默认样式。请参阅下面的

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

重要！：

• 请，请注意，如果您有一个名称的选项太长（IT在这种情况下，需要超出您所需的宽度，200px）完全在选定的选项中显示，除了您必须在X轴上滚动，以便在下拉列表中完全读取它列表。
• 当您创建一个UI选择项目时，它将为其所有内容生成一个DIV，并且使用三个栏，所有这些DIV可能会显示在其他内容下，另一个下面是其他DIV。（ TIP ：您可以使用Bootstrap类解决此问题：col-md-4适用于包装每个UI选择的每个Div）
）