Question

如果屏幕是md，而xs我想在屏幕上居中，我想向右晃动，我能做到吗？

我不知道该怎么办

enter code here

<div class="col-xs-12 col-md-4 box-header">
<h3 class="box-title">REPORT</h3>  
</div>  
<div class="col-xs-12 col-md-8  box-header col text-center">
<h4 class="box-title pull-center" >
<i class="glyphicon glyphicon-shopping-cart"></i><a href="#">CLICK TO REPORT</a>
</h4>
</div>

如果屏幕是xs，我想要文本中心，否则我想在右侧看到

Answer 1

您可以结合使用d-flex和justify-content-center和justify-content-md-end类来实现它。另请注意，在引导程序4 中，没有col-xs-12，应将其替换为col-12。但是，如果省略该配置，它将隐式采用该配置：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-md-4 box-header">
    <h3 class="box-title">REPORT</h3>  
  </div>

  <div class="col-12 col-md-8 box-header">
    <h4 class="box-title d-flex justify-content-center justify-content-md-end">
      <i class="glyphicon glyphicon-shopping-cart"></i>
      <a href="#">CLICK TO REPORT</a>
    </h4>
  </div>

</div>
</div>

如何根据屏幕宽度将.pull-right对齐以在引导程序中对齐文本

1 个答案: