Question

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

我从ui-select的官方页面复制了样本，因此它包含很多我不理解的css内容，而且我对css或bootstrap不太了解...

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中找到它：http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview

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

提前谢谢！

Answer 1

使用bootstrap编辑2（如何使用col-xx-nn）属性

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

xs ：超小型设备

sm ：小型设备

md ：中型设备

lg ：lg devices

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

重要：

请注意，如果你有一个名字选项太长的选项（它需要超过你想要的宽度，在这种情况下200px）它不会是完全显示在选定的选项中，除此之外你必须滚动x轴以便在下拉列表中完全读取它列表。

当您创建一个ui-select项目时，它将为其所有内容生成一个div，并且有三个条形图，可能会显示所有这些div，一个低于其他div。（提示：你可以使用bootstrap类来解决这个问题：col-md-4为每个包含每个ui-select的div提供这样的信息。

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

1 个答案:

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

1 个答案:

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