Question

<body>
  <nav class="navbar navbar transparent">
      <div class="container-fluid logo">
        <div class="navbar-header">
         <a class="navbar-brand" href="#">
           <img src="images/Logo.png" />
         </a>
      </div>
    <ul class="nav navbar-nav navbar-right right font-top">
          <li class="Buybtn-topright">
            <button type="button" class="btn-link"> Buy now</button>
       </li>
    </ul>
  </div>
</nav>
<div class="form" >

  <ul class="tab-group">
    <li class="tab active"><a href="#signup">Sign Up</a></li>
    <li class="tab"><a href="#login">Log In</a></li>
  </ul>

  <div class="tab-content">
    <div id="signup">   
      <h1>Sign Up for Free</h1>

      <form action="signup.php" method="post">

      <div class="top-row">
        <div class="field-wrap">
          <label>
            Full Name<span class="req">*</span>
          </label>
          <input type="text" name="FuName" required autocomplete="off" />
        </div>

        <div class="field-wrap">
          <label>
            user name<span class="req">*</span>
          </label>
          <input type="text" name="username"required autocomplete="off"/>
        </div>
      </div>

      <div class="field-wrap">
        <label>
          Email Address<span class="req">*</span>
        </label>
        <input  type="email" name="email"required autocomplete="off"/>
      </div>

      <div class="field-wrap">
        <label>
          Set A Password<span class="req">*</span>
        </label>
        <input type="password" name="password" required autocomplete="off"/>
      </div>
      <div class="field-wrap">
        <label>
          c A Password<span class="req">*</span>
        </label>
        <input type="password" name="CPass" required autocomplete="off"/>
      </div>

      <button type="submit" class="button button-block"/>Get Started</button>

      </form>

    </div>

    <div id="login">   
      <h1>Welcome Back!</h1>

      <form action="signin.php" method="post" >

        <div class="field-wrap">
        <label>
          username <span class="req">*</span>
        </label>
        <input name="username" id="username" required autocomplete="off"/>
      </div>

      <div class="field-wrap">
        <label>
          Password<span class="req">*</span>
        </label>
        <input  type="password" name="password" id="password" required autocomplete="off"/>
      </div>

      <p class="forgot"><a href="#">Forgot Password?</a></p>

      <button type="submit" name="submit" value="Login "class="button button-block"/>Login</button>

      </form>

    </div>
    </div>  </div> 
       <div class="row">
    <nav class="navbar navbar-default footer">
      <div class="container-fluid">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button> 
        <a class="navbar-brand" href="#">
          <img src="images/Logobott.png" />
        </a></div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="foot-stylee">
              <a href="#">Apps</a>
            </li>
            <li>
              <a href="#">Gadgets</a>
            </li>
            <li>
              <a href="#">Sience</a>
            </li>
            <li>
              <a href="#">Nature</a>
            </li>
            <li>
              <a href="#">Creative</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right nav-r">
            <li>
              <a href="#">© 2016 Great Simple</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

   <!-- tab-content -->


  </div>     
        </body>
          </html>

我在html中有上面的代码，当我在移动版本中查看时，它看起来像桌面，所以它没有响应。但令我困惑的是，对于FOOTER和HEADER，我在其他页面中具有相同的确切代码并且它们是响应式的吗？有什么建议吗？

Answer 1

您是否忘记加载Bootstrap CSS？

Answer 2

要使用Twitter bootstrap启用响应，HTML页面的<head>部分应包含 <meta name="viewport" content="width=device-width, initial-scale=1"> 。

因此，对于基本启动响应式Twitter Bootstrap模板，请转到getting started twitter Bootstrap页面。

HTML页面不会切换到移动版本/无响应

2 个答案: