Мой отзывчивый пользовательский интерфейс не реагирует на bootstrap - PullRequest
Новая
       16

Мой отзывчивый пользовательский интерфейс не реагирует на bootstrap

0 голосов
/ 05 января 2020

Я создал адаптивный пользовательский интерфейс в bootstrap, но мой макет совсем не адаптивный.

Я могу жить с версией для ПК, но на мобильных устройствах и планшетах это выглядит ужасно. Как я могу это исправить? и что именно является причиной того, что мой макет ведет себя так же, как на небольших устройствах?

Вы можете найти живую версию здесь: uncovered-muscle.surge. sh

Или посмотрите здесь код, если вам не нравятся переходы по ссылкам 

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

Я использую bootstrap для макета

1 Ответ

0 голосов
/ 05 января 2020

Это потому, что в вашем документе отсутствует метатег viewport. Я настоятельно рекомендую вам проверить Bootstrap Starter Template , если вы этого еще не сделали. Добавление следующего чуть ниже <meta charset="utf-8"> должно помочь: 

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

Для получения дополнительной информации о теге viewport вы можете, например, проверить статью о Использование метатега viewport управлять макетом в мобильных браузерах из MDN Web Docs. По сути, это гарантирует, что фактическая ширина устройства будет использоваться для любых медиа-запросов, которые, например, Bootstrap использует для размещения столбцов. В противном случае для обеспечения совместимости со старыми сайтами будет использоваться большая виртуальная ширина.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...