如何使用Bootstrap RTL获得所需的按钮视图？

Question

我在Angular.js SPA项目上工作，我在我的项目中使用bootstrap3.3.7版本和RTL Bootstrap Less。

我将RTL Bootstrap Less文件导入我的bootstrap.css文件：

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

所以项目的风格是RTL。

这是我网页上的一些HTML代码：

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

这是上面代码中的渲染视图：

问题在于过滤器按钮似乎是倒置的，因为圆角位于左侧。

我希望它是这样的：

这似乎是问题，因为我在我的SPA项目中使用RTL样式。

知道我在Bootstrap样式配置中需要更改什么才能获得所需的按钮视图？

Answer 1

看起来你的本地CSS与bootstrap冲突，否则它看起来不错，这里是小提琴代码和输出，请参阅此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>