如何为移动设备创建引导卡菜单？

Question

我正在创建一个类似移动应用程序的网站，使用引导程序没有混合或本机只是一个引导程序响应站点，所以我为它创建了一个菜单卡，但我的代码的主要问题是当我切换移动设备时，我的对齐方式发生了变化，例如，我的文字和卡片位置正在改变。那么如何才能对所有手机屏幕尺寸做出更好的响应呢？

（注意 - 投反对票的人请解释投反对票的原因。这样我可以改进我的问题）

我的代码：

<div class="container">

  <div class="row bg-info" style="height: 100px;">
   <div class="col-md-4 ">
    <a href="{{ URL::route('home') }}" style="text-decoration: none">
     <div class="card-block" style="padding-left: 165px;padding-top:20px;background-position: 0 0;">
      <div class="icons">
        <i class="fa fa-users fa-3x text-white"></i>
      </div>
    </div>
    <div>
     <h5 class="card-title text-white" style="padding-left: 160px; padding-bottom: 20px">{{Auth::user()->name}}</h5>
   </div>
 </a>
</div>
</div>
</div>
<div class="container" style="transform: translate(-3px, 13px);">
  <div class="row my-3">
    <div class="col-md-4">
      <a href="{{ URL::route('clients.index') }}" style="text-decoration: none">
        <div class="card text-center bg-info text-white">
          <div class="card-block" >             
            <h2><i class="fa fa-users fa-2x"style="padding-top: 20px"></i></h2>
          </div>
          <div class="row px-2 no-gutters">
           <h4 class="card-title">Manage Customer</h4>
         </div>
       </div>
     </a>
   </div>
   <div class="col-md-4">
    <a href="{{ URL::route('payments.index') }}" style="text-decoration: none">
      <div class="card text-center bg-info text-white">
        <div class="card-block" >             
          <h2><i class="fa fa-file-text-o fa-2x"style="padding-top: 20px"></i></h2>
        </div>
        <div class="row px-2 no-gutters">
         <h4 class="card-title">Collection Report</h4>
       </div>
     </div>
   </a>
 </div>
</div>
<div class="row my-3">
  <div class="col-md-4">
    <a href="{{ URL::route('billings.index') }}" style="text-decoration: none">
      <div class="card text-center bg-info text-white">
        <div class="card-block" >             
          <h2><i class="fa fa-university fa-2x" style="padding-top: 20px"></i></h2>
        </div>
        <div class="row px-2 no-gutters">
         <h4 style="margin-left: 40px" class="card-title">Billing</h4>
       </div>
     </div>
   </a>
 </div>
 <div class="col-md-4">
  <a href="{{ URL::route('paymentStatus') }}" style="text-decoration: none">
    <div class="card text-center bg-info text-white">
      <div class="card-block" >             
        <h2><i class="fa fa-usd fa-2x"style="padding-top: 20px"></i></h2>
      </div>
      <div class="row px-2 no-gutters">
       <h4  class="card-title">Paid/Unpaid</h4>
     </div>
   </div>
 </a>
</div>
</div>
<div class="row my-3">
  <div class="col-md-4">
    <a href="{{ URL::route('packages.index') }}" style="text-decoration: none">
      <div class="card text-center bg-info text-white">
        <div class="card-block" >             
          <h2><i class="fa fa-television fa-2x" style="padding-top: 20px"></i></h2>
        </div>
        <div class="row px-2 no-gutters">
         <h4 style="margin-left: 40px" class="card-title" style="margin-left:18px">Package</h4>
       </div>
     </div>
   </a>
 </div>
 <div class="col-md-4">
  <a href="{{ URL::route('areas.index') }}" style="text-decoration: none">
    <div class="card text-center bg-info text-white">
      <div class="card-block" >             
        <h2><i class="fa fa-map-marker fa-2x"style="padding-top: 20px"></i></h2>
      </div>
      <div class="row px-2 no-gutters">
       <h4 class="card-title" style="margin-left:15px">Add Area</h4>
     </div>
   </div>
 </a>
</div>
</div>
</div>

我的输出：

代码链接：

Codepen

Answer 1

从我的角度来看，有几个可能的改进

• 尽可能不要使用内联样式
• 将 html 从锚标记中移出
• 按钮无需使用 col 类。定义一次按钮宽度，让按钮浮动（左）。
• 将按钮边距设置为“自动”，以便内部内容在所有设备上居中

Answer 2

类似的东西？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
</div>
<div class="row">
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
</div>
<div class="row">
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
</div>
</div>