时间戳

首页 > 解决方案 > Bootstrap 页面的响应性

html - Bootstrap 页面的响应性

问题描述

你能说为什么这段代码不适应不同的移动设备吗？我是 HTML 初学者，无法弄清楚。我正在使用 Bootstrap 4 框架。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="xxxxx.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet"> 

    <title>xxxxx</title>
  </head>
  <body>
  <div class = "container">
   <hr class = "spec-hr">
  <div class = "row justify-content-md-center">
    <div class = "col-md-6 text-left name">
  xxxxxx
  </div>
  <hr class = "spec-hr">
 </div>
  <div class="row justify-content-md-center intro">
    <div class="col-md-3 text-center">
      Photo
    </div>

    <div class="col-md-3 text-center">
      Kontakt<br>
      <p class = "email">xxxxx@gmail.com<br>
      mobile: xxxx<br>
      facebook: xxxxx</p>
    </div>
  </div>
  <hr class = "spec-hr">

  <!--Motto-->

  <div class="row justify-content-md-center motto">
    <div class="col-md-6 text-center">
      <p class="motto">Every day is a chance to get better<br></p>
       <p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
    </div>
  </div>
  <hr class = "spec-hr">

  </div>
  </body>

 </html>

标签： htmlbootstrap-4

解决方案

您使用 和 等类col-md-6，col-md-3这些适用于中等大小的屏幕。对于移动设备，您需要 和 等col-6类col-3。有关示例和定义，请参见此处

推荐阅读