Question

如何使用Bootstrap将图标放置在最右边，并将文本保留在左侧。

到目前为止，这是我的努力：https://www.bootply.com/5E2CGFEWdx

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>

Answer 1

您可以使用float: right将图片固定在右侧，并设置text-align: left，使文本从左端开始。

Example here

align-left {
  text-align: left;
}

.push-right {
  float: right;
}

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12 align-left"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>

Answer 2

尝试关注

<style>
button {text-align:left}
</style>

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone pull-right"></span></button>
  </div>
</div>

Answer 3

您可以重新放置带有图标的span并将其设置为float: right;：

.container {
  margin-top: 25px;
}

.call-us {
  text-align: left !important;
}

.call-us span {
  float: right;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12 call-us"><span class="glyphicon glyphicon-earphone"></span>Call Us</button>
  </div>
</div>

Answer 4

使用pull-left，pull-right实用工具类

<html>
<head>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

</head>
<body>

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12">
      <span class="pull-left">Call Us</span>
      <i class="glyphicon glyphicon-earphone pull-right"></i>
    </button>
  </div>
</div>

</body>
</html>

文字在左侧，图标在右侧-引导程序

4 个答案: