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

Question

我用ui-select元素編寫了一個小角度的程序。問題在於搜索欄太長，我沒有找到如何減少它。通常，我們有一些可以改變的「寬度」屬性，但是CSS代碼太複雜了，我沒有找到如何管理它。我想要做的是在同一行保存三個小節。

我複製從UI選的官方頁面的樣品，所以它包含了很多的CSS中的事情，我不明白，我不知道很多關於CSS或引導...

在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

• 你能SH我怎麼才能減小搜索欄的寬度？
• 你能告訴我如何刪除在我的例子中沒有使用的plunker中包含的select.css的所有不必要的行嗎？我不知道我該如何有效地做到這一點。我害怕刪除重要的元素，我真的迷失在這個龐大的CSS文件中。

預先感謝您！

Answer 1

編輯2（如何使用COL-XX-NN）具有引導性

的XX指示在其中查看您想要要應用的特性：

XS：超小型設備

SM：小型設備

的md：介質設備

LG：LG設備

的ン指示該元素將多少列佔據（總是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，並把這些規則。確保包括這個以用戶界面，選擇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選擇項目時，它將爲其所有內容生成一個div，並且在三個小節中，所有這些div可能會顯示出來，其中一個小於其他小節。 （TIP：可以解決這個使用自舉類：col-md-4每它包裝每UI選DIV）