Javascript 我的响应式用户界面不是'；引导中的t响应_Javascript_Twitter Bootstrap

Javascript 我的响应式用户界面不是'；引导中的t响应

javascript twitter-bootstrap

Javascript 我的响应式用户界面不是'；引导中的t响应,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我在bootstrap中创建了一个响应性Ui，但我的布局根本没有响应性我可以使用桌面版，但在手机和平板电脑上看起来很糟糕。我怎样才能解决这个问题？我的布局在较小的设备上表现出这种行为的确切原因是什么您可以在此处找到实时版本：如果您不喜欢单击链接，也可以在此处查看代码 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <

我在bootstrap中创建了一个响应性Ui，但我的布局根本没有响应性

我可以使用桌面版，但在手机和平板电脑上看起来很糟糕。我怎样才能解决这个问题？我的布局在较小的设备上表现出这种行为的确切原因是什么

您可以在此处找到实时版本：

如果您不喜欢单击链接，也可以在此处查看代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

    <title></title>
  </head>
  <body>

    <!--Navbar -->
    <nav class="mb-1 navbar navbar-expand-lg navbar-dark indigo">
      <a class="navbar-brand" href="#">HOME</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
        aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent-555">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">exchange
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">community</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">How To</a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto nav-flex-icons">
          <li class="nav-item avatar">
            <a class="nav-link p-0" href="#">
              <img src="#" class="rounded-circle z-depth-0"
                alt="avatar image" height="35">
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!--/.Navbar -->
    <div class="container">
      <div class="jumbotron card card-image" style="background-color:black;opacity: 0.8;">
  <div class="text-white text-center py-5 px-4">
    <div>
      <div class="row">
  <div class="col-sm-6">

  </div>
  <div class="col-sm-6">
    <div class="card">
       <div class="card-body">
         <h5 class="card-title" style="color:black;">Contract Balance</h5>
         <p class="card-text">
           <input class="form-control form-control-lg" type="text" placeholder="AGI" id="contractBalanceAgi"><br>
      <input class="form-control form-control-lg" type="text" placeholder="SNET" id ="contractBalanceSnet"></p>

       </div>
  </div>
</div>
    </div>
  </div>
</div>

    </div>
    <div class="container" style="background-color:black;opacity:0.8;" >
      <h1 style="text-align:center;color:white;">Invest</h1>
      <div class="row">
        <div class="col">
          <!-- Card -->
  <div class="card">

    <!-- Card image -->


    <!-- Card content -->
    <div class="card-body">

      <!-- Title -->
      <h4 class="card-title"><a>STEP 1</a></h4>
      <!-- Text -->
      <p class="card-text">Exchange rate per SNET</p>
      <!-- Button -->
      <h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1 AGI</h2>
      <br>
      <h3>0.00000</h3>

    </div>

  </div>
  <!-- Card -->
        </div>
        <div class="col">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title"><a>STEP 2</a></h4>
    <!-- Text -->
    <p class="card-text">Amount of AGI</p>
    <!-- Button -->
    <input type="number" id="exampleForm2" class="form-control">
    <br>
    <h4>AGI available</h4>
  </div>

</div>
<!-- Card -->
        </div>
        <div class="col">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title"><a>STEP 3</a></h4>
    <!-- Text -->
    <p class="card-text">You receive</p>
    <!-- Button -->
    <input type="number" id="exampleForm2" class="form-control">
    <br>
    <h4>AGI approximatly</h4>
  </div>

</div>
<!-- Card -->
        </div>
        <div class="col">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title"><a>STEP 4</a></h4>
    <!-- Text -->
    <p class="card-text">Confirm your purchase</p>
    <!-- Button -->
    <a href="#" class="btn btn-primary btn-rounded btn-block" id="approve">Approve</a>
    <br>
    <br>
    <a href="#" class="btn btn-success btn-rounded btn-block" id="mint">Mint</a>
  </div>

</div>
<!-- Card -->
        </div>
      </div>
    </div>
    <br>
    <div class="card" style="background-color:black;opacity: 0.6;">
         <div class="card-body">
           <h5 class="card-title"></h5>
           <p class="card-text" style="color:white;">Note: 10% entry fees, 10% exit fees, 2% referral fees, 2% dev fees.The sell fee will
             only be distributed if you actually sell your tokens. The number of tokens you will receive for your AGI does not include the fees, it's an estimate.</p>

         </div>
       </div><!-- end of card -->
       <br>
<div class="container">
  <div class="row">
    <div class="col" >

<!-- Card -->
<div class="card card-image" style="background-color:grey;">

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-pie"></i> Your Holdings</h5>
      <h3 class="card-title pt-2"><strong><h2 class="card-text"><img src="images/agi.png" class="rounded" style="width:15%">1.1 AGI</h2></strong></h3>
      <h3 class="card-title pt-2"><strong>AGI VaLue</strong></h3>

<p>AGI</p>
<div class="row" >
<div class="col-sm-6" >AGI</div>
<div class="col-sm-6" >$ 0.13</div>
</div>

    </div>
  </div>

</div>
<!-- Card -->

    </div>
    <div class="col">.col</div>
    <div class="col">
      <!-- Card -->
<div class="card card-image" style="background-color:grey;">

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
      <h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
      <div class="row">
      <div class="col-sm-6">
        <h3>Option 1</h3>
        <p>SNET</p>
        <button type="button" class="btn btn-primary" id="reinvest">REINVEST</button>
      </div>
      <div class="col-sm-6">
        <h3>Option 2</h3>
        <p>AGI</p>
        <button type="button" class="btn btn-primary" id="withdraw">WITHDRAW</button>
      </div>
    </div>

    </div>
  </div>

</div>
<!-- Card -->
    </div>
  </div>

</div>
<br>
<div class="card" style="background-color:black;opacity: 0.8;text-align:center;">
     <div class="card-body">
       <h5 class="card-title">Masternode</h5>
       <p class="card-text" style="color:white;" id="masternode">http://snetsaving.com</p>

     </div>
   </div><!-- end of card -->
<br>
   <div class="container" style="background-color:black;opacity:0.8;">
     <h1 style="text-align:center; color:white;">Exchange</h1>
       <div class="row">
         <div class="col">
           <!-- Card -->
   <div class="card">

     <!-- Card image -->


     <!-- Card content -->
     <div class="card-body">

       <!-- Title -->
       <h4 class="card-title"><a>STEP 1</a></h4>
       <!-- Text -->
       <p class="card-text">Exchange rate per SNET</p>
       <!-- Button -->
       <h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1.1 AGI</h2>
       <br>
       <h3>0.00000 USD</h3>
       <br>

     </div>

   </div>
   <!-- Card -->
         </div>
         <div class="col">
           <!-- Card -->
 <div class="card">

   <!-- Card image -->


   <!-- Card content -->
   <div class="card-body">

     <!-- Title -->
     <h4 class="card-title"><a>STEP 2</a></h4>
     <!-- Text -->
     <p class="card-text">Amount to exchange</p>
     <!-- Button -->
     <input type="number" id="exampleForm2" class="form-control">
     <br>
     <h4>SNET available</h4>
     <br>
   </div>

 </div>
 <!-- Card -->
         </div>
         <div class="col">
           <!-- Card -->
 <div class="card">

   <!-- Card image -->


   <!-- Card content -->
   <div class="card-body">

     <!-- Title -->
     <h4 class="card-title"><a>STEP 3</a></h4>
     <!-- Text -->
     <p class="card-text">You receive</p>
     <!-- Button -->
     <input type="number" id="exampleForm2" class="form-control">
     <br>
     <h4>AGI approximatly</h4>
     <br>
   </div>

 </div>
 <!-- Card -->
         </div>
         <div class="col">
           <!-- Card -->
 <div class="card">

   <!-- Card image -->


   <!-- Card content -->
   <div class="card-body">

     <!-- Title -->
     <h4 class="card-title"><a>STEP 4</a></h4>
     <!-- Text -->
     <p class="card-text">Confirm your exchange</p>
     <!-- Button -->
     <br>
     <br>
     <a href="#" class="btn btn-primary btn-rounded btn-block">Exchange</a>
     <br>
     <br>
   </div>

 </div>
 <!-- Card -->
         </div>
       </div>
     </div>
     <br>
     <!-- Footer -->
<footer class="page-footer font-small blue">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2020 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> SNETSAVING.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

  </body>
</html>














合同余额




投资






注：10%的入场费、10%的退场费、2%的推荐费、2%的开发费。销售费将
仅当您实际出售代币时才能分发。您将收到的AGI代币数量不包括费用，这是一个估计数


你的财产
1.1 AGI
AGI值
AGI
AGI
$ 0.13
上校
你的奖励
已赚AGI
选择1
斯奈特
再投资
选择2
AGI
撤退


主节点
http://snetsaving.com


交换






©2020版权所有：

我对布局使用bootstrap，这是因为您的文档中缺少meta标记

viewport

。我强烈建议您检查引导，如果您还没有。在

下面添加以下内容应该可以做到：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

有关

viewport

标记的更多信息，例如，您可以从MDN web docs上查看文章。基本上，它确保实际的设备宽度将用于任何媒体查询，例如引导用于列布局。否则，将使用更大的虚拟宽度来确保与旧站点的兼容性。

注意：在您的问题中，在此处发布一条消息是必需的，而不是可选的。只有这个链接才能关闭你的问题。我发布了链接-muscle.surge.shI-know。这是不必要的，再说一次，如果你只把它包含在代码中，它会把这个删除。那么我需要什么呢？你能写信让我明白我做错了什么吗？我不是说你做错了什么。我对你的“如果你不喜欢点击链接，请看下面的代码”进行了评论，以确保你明白你必须在这里发布代码，只提供链接是不好的。不幸的是，这并没有解决多少问题。移动版看起来很糟糕，尤其是在三星S10上，尝试使用

col-sm-3

（对于列1/4，桌面上的宽度）和

col-sm-4

（对于列1/3，桌面上的宽度）类而不是普通的

col

类。这应该可以确保你的所有卡片都能在移动设备上折叠成全宽的卡片。完美的TR4Android成功了-现在我需要做的最后一件事就是在步骤1和步骤2之间添加一个
标签来获得间距，或者是否有更好的方法来获得步骤1步骤2步骤3元素之间的间距在小型设备上非常有效但在iphone上，尤其是在ipad和iPadProtry上将

pb-3

类添加到

col-sm-3

元素中，它看起来仍然像垃圾。这将在每张卡的底部添加

1rem