html - Bootstrap - div，如何在不破坏响应能力的情况下使 div 中的第三个元素最右边

Question

我有一个按钮:

                <div class="col-sm-12 col-xs-12">
                    <a href="#">
                        <div class="homeButtons" style="background-color:#4b4b4b" ng-click="showRequestForm()" style="text-align:center; padding-top:2em; display:inline-block;">
                            <div class="inline-blockClass"><img src="/images/search-icon.png" width="50" height="50"></img>
                            </div>
                            <div class="inline-blockClass" style="padding-left:2em"><span class="genericTextHomeButtons">SEARCH</span></div>
                            <div class="inline-blockClass col-md-offset-8"> <img src="/images/arrow-right.png" width="50" height="50"></img>
                            </div>
                        </div>
                    </a>
                </div>

看起来像这样:

我试图让箭头指向父容器的最右侧。当我执行 padding-left: 5em 时，它会破坏响应能力。我试过抵消它不起作用。我也试过 position:relative; float:right 有效但会破坏响应能力。

我怎样才能做到这一点，谢谢

编辑:

使用右拉有响应问题:

Answer 1

我认为最简单的方法是将您的元素分成 3 个单独的列，并将这些元素包装在自己的类中，这样您就可以控制它们的位置。

*参见工作示例；一个带有图像，一个带有字体图标。

body {
  padding-top: 50px;
}
.homeButtons {
  text-align: center;
  background-color: #4b4b4b;
  line-height: 49px;
  height: 50px;
}
.homeButtons img {
  width: 50px;
  height: 50px;
}
.homeButtons .glyphicon {
  color: white;
  font-size: 45px;
}
.genericTextHomeButtons {
  color: white;
}
.img-left {
  left: 0;
  float: left;
}
.img-right {
  right: 0;
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h3>With Images</h3>
  <div class="homeButtons" ng-click="showRequestForm()">
    <div class="row">
      <div class="col-xs-4">
        <div class="img-left">
          <img src="http://placehold.it/350x150/f00/f00" />
        </div>
      </div>
      <div class="col-xs-4"><span class="genericTextHomeButtons">SEARCH</span>

      </div>
      <div class="col-xs-4">
        <div class="img-right">
          <img src="http://placehold.it/350x150/ff0/ff0" />
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container-fluid">
  <h3>With Icon Fonts</h3>
  <div class="homeButtons" ng-click="showRequestForm()">
    <div class="row">
      <div class="col-xs-4">
        <div class="img-left"> <span class="glyphicon glyphicon-chevron-left"></span>

        </div>
      </div>
      <div class="col-xs-4"><span class="genericTextHomeButtons">SEARCH</span>

      </div>
      <div class="col-xs-4">
        <div class="img-right"> <span class="glyphicon glyphicon-chevron-right"></span>

        </div>
      </div>
    </div>
  </div>
</div>