Javascript 如何为手机创建引导卡菜单？

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

（注：投票人请解释投票失败的原因。这样我可以改进我的问题）

我的代码：

<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>

我的输出：

代码链接：

---

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

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

1.
1.
1.
1.
1.
1.

可能是因为您要求的设计决策不是编程问题。你也不是在问一个关于特定问题的特定问题，这个问题可以返回一个特定的解决问题的答案@Rob我已经更改了我的问题，现在可以了吗？谢谢你的回答，我会试试。@user3837868不客气。在你改变了你的问题和笔后，我可以有一个新的面貌，也许可以为你提供一个更好的解决方案。谢谢你的回答，我会试试的。