如何使用引導來對齊angularjs應用程序中的下拉列表？

Question

我是新手引導，我不知道如何使用它。我在我的HTML中有以下代碼。我的項目中有compass_twitter_bootstrap。

<div class="well"> 
    <h3>All Adventures</h3> 

    <table> 
    <tr><td> 
    <select name="" id="" ng-model="category" ng-options="c for c in categories"> 
     <option value="">-- Choose Category --</option> 
    </select> 
    </td> 
    <td><google-places location=location></google-places></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td><select name="" id="" ng-model="tMode" ng-options="tM for tM in tModes"> 
     <option value="">-- Choose Transportation Mode --</option> 
    </select></td> 
    </tr> 
    </table> 
    <br/> 
    <div ng-model="adventures"></div> 
    <div ng-model="foods"></div> 
    <div ng-model="arts"></div> 
    <div ng-model="histories"></div> 
    <div ng-model="fitness"></div> 
    <div ng-model="parks"></div> 
    <div ng-model="photos"></div> 
    <div ng-model="scavenger"></div> 
    <div ng-model="shopping"></div> 
    <div ng-model="sightseeing"></div> 
    <div ng-model="specialevents"></div>  
    <div ng-model="ghosts"></div> 
    <div ng-model="others"></div> 
</div> 

    <ul class="unstyled"> 
     <li ng-repeat="tour in tours"> 
      <div class="well"> 
       <h4>{{tour.name}}</h4> 
       <a href="#/maps"><h5><em>{{tour.author}}</em></h5></a> 
       <p>{{tour.category}}</p> 
       <p>{{tour.createDate}}</p> 
       <p>{{tour.dislikes}}% disliked it</p> 
       <p>{{tour.duration}} minutes</p> 
       <p>{{tour.likes}}% liked it</p> 
       <h5><p>{{tour.stops.name0}}</p></h5> 
       <h5><p>{{tour.stops.name1}}</p></h5> 
       <h5><p>{{tour.stops.name2}}</p></h5> 
       <h5><p>{{tour.stops.name3}}</p></h5> 
       <p>{{tour.transportMode}}</p> 
      </div> 
     </li> 
    </ul> 

我有兩個下拉框，如附圖所示。任何人都可以給我建議，我如何使用引導和對齊下拉框和UI中的輸入文本框？

Answer 1

您使用的是<table>所以如果想所有字段是內聯，你需要包括在同一行的表中的所有字段，如：

<table> 
<tr> 
    <td> 
     <select name="" id="" ng-model="category" ng-options="c for c in categories"> 
      <option value="">-- Choose Category --</option> 
     </select> 
    </td> 
    <td> 
    <google-places location=location></google-places> 
    </td> 
    <td> 
    <select name="" id="" ng-model="tMode" ng-options="tM for tM in tModes"> 
     <option value="">-- Choose Transportation Mode --</option> 
    </select> 
    </td> 
</tr> 
</table> 

這對於任何HTML頁面都是一樣的 - 它與bootstrap和AngularJS沒有直接關係