Question

如何确保在使用移动模式时图标不会垂直显示，而是像桌面版一样保持水平？我尝试通过添加display: inline属性来解决问题，因为this question的答案已得到解答但未产生任何结果

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>

<div class="col-lg-4 col-md-12 col-xs-12 text-center" style="margin-top: 15px;">
  <div class="row" style="height: 70px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 0;">
      <div class="col-md-4">
          <i class="fas fa-cogs" style="display:inline; font-size: 24px; color: rgb(20, 20, 71);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">0</p>
      </div>
      <div class="col-md-4">
          <i class="fas fa-question" style="display:inline; font-size: 24px; color: rgb(233, 17, 17);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">7</p>
      </div>
      <div class="col-md-4">
          <i class="fas fa-check" style="display:inline; font-size: 24px; color: rgb(20, 175, 20);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">3</p>
      </div>
  </div>
  </div>

＆＃13;

Answer 1

在包裹图标的3个div中的每个div上，删除类.col-md-4并为每个类赋予30％左右的宽度。
在.row添加display:flex，justify-content:space-around，flex-flow:row nowrap。
在最外层的div上添加class="container"

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>SO49836008</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
  <style>

  </style>
</head>

<body>
  <header></header>
  <section class="container">

    <div class="col-lg-4 col-md-12 col-xs-12 text-center" style="margin:15px;auto">
      <div class="row" style="height: 70px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 0;display:flex;justify-content:space-around;flex-wrap:row nowrap;">


        <div width='30%'>
          <i class="fas fa-cogs" style="display:inline; font-size: 24px; color: rgb(20, 20, 71);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">0</p>
        </div>


        <div width='30%'>
          <i class="fas fa-question" style="display:inline; font-size: 24px; color: rgb(233, 17, 17);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">7</p>
        </div>


        <div width='30%'>
          <i class="fas fa-check" style="display:inline; font-size: 24px; color: rgb(20, 175, 20);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">3</p>
        </div>


      </div>
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

防止包装FontAwesome

1 个答案:

演示