Önyükleme RTL kullanarak istenen düğme görünümü nasıl elde edilir?

Question

Angularjs SPA projemde çalışıyorum Projektörümde bootstrap3.3.7 sürümünü ve RTL Bootstrap Azını kullanıyorum.

benim bootstrap.css dosyasına RTL Bootstrap Az dosyalar ithalat yaptı:

/*Core variables and mixins*/ 
@import "RTL-Bootstrap-Less/variables.less"; 
@import "RTL-Bootstrap-Less/mixins.less"; 

/*Reset*/ 
@import "RTL-Bootstrap-Less/normalize.less"; 
@import "RTL-Bootstrap-Less/print.less"; 

/*Core CSS*/ 
@import "RTL-Bootstrap-Less/scaffolding.less"; 
@import "RTL-Bootstrap-Less/type.less"; 
@import "RTL-Bootstrap-Less/code.less"; 
@import "RTL-Bootstrap-Less/grid.less"; 
@import "RTL-Bootstrap-Less/tables.less"; 
@import "RTL-Bootstrap-Less/forms.less"; 
@import "RTL-Bootstrap-Less/buttons.less"; 

/*Components*/ 
@import "RTL-Bootstrap-Less/component-animations.less"; 
@import "RTL-Bootstrap-Less/glyphicons.less"; 
@import "RTL-Bootstrap-Less/dropdowns.less"; 
@import "RTL-Bootstrap-Less/button-groups.less"; 
@import "RTL-Bootstrap-Less/input-groups.less"; 
@import "RTL-Bootstrap-Less/navs.less"; 
@import "RTL-Bootstrap-Less/navbar.less"; 
@import "RTL-Bootstrap-Less/breadcrumbs.less"; 
@import "RTL-Bootstrap-Less/pagination.less"; 
@import "RTL-Bootstrap-Less/pager.less"; 
@import "RTL-Bootstrap-Less/labels.less"; 
@import "RTL-Bootstrap-Less/badges.less"; 
@import "RTL-Bootstrap-Less/jumbotron.less"; 
@import "RTL-Bootstrap-Less/thumbnails.less"; 
@import "RTL-Bootstrap-Less/alerts.less"; 
@import "RTL-Bootstrap-Less/progress-bars.less"; 
@import "RTL-Bootstrap-Less/media.less"; 
@import "RTL-Bootstrap-Less/list-group.less"; 
@import "RTL-Bootstrap-Less/panels.less"; 
@import "RTL-Bootstrap-Less/wells.less"; 
@import "RTL-Bootstrap-Less/close.less"; 

/*Components w/ JavaScript*/ 
@import "RTL-Bootstrap-Less/modals.less"; 
@import "RTL-Bootstrap-Less/tooltip.less"; 
@import "RTL-Bootstrap-Less/popovers.less"; 
@import "RTL-Bootstrap-Less/carousel.less"; 

/*Utility classes*/ 
@import "RTL-Bootstrap-Less/utilities.less"; 
@import "RTL-Bootstrap-Less/responsive-utilities.less"; 

Yani projenin tarzı RTL olduğunu. İşte

benim sayfasından bazı HTML kodu: çünkü böyle ters görünüyor

sorun filtre düğmesi ile geçerli: Burada

<div class="well"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="Filter" ng-model="query" /> 
     <div class="btn btn-default input-group-addon"> 
      <i class="glyphicon glyphicon-filter"></i> 
     </div> 
    </div> 
</div> 

Ve yukarıdaki koddan render görünümüdür yuvarlatılmış köşeler sol tarafta.

ben böyle olmak istiyorum: Ben SPA projesi için RTL stilini kullandıkları için

Bu sorunu gibi görünüyor.

Herhangi bir fikir, düğmenin istenilen görünümünü elde etmek için önyükleme stilim yapılandırmamda neyi değiştirmek zorundayım?

Şimdiden teşekkürler.

Answer 1

bootstrap ile yerel CSS çatışma aksi takdirde burada, iyi görünüyor keman kodu ve çıkışı görünüyor, bu link

<div class="container"> 
    <div class="well"> 
     <div class="input-group"> 
      <div class="btn btn-default input-group-addon"> 
       <i class="glyphicon glyphicon-filter"></i> 
      </div> 
      <input class="form-control" placeholder="Filter" ng-model="query" /> 
     </div> 
    </div> 
</div>