Bootstrap页面的响应性[重复]答案

【问题标题】：Responsiveness of Bootstrap page [duplicate]Bootstrap页面的响应性[重复]
【发布时间】：2023-04-02 04:24:01
【问题描述】：

你能说为什么这段代码不适应不同的移动设备吗？我是 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>

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

您使用诸如col-md-6 和col-md-3 之类的类，它们适用于中型屏幕。对于移动设备，您需要诸如col-6 和col-3 之类的类。有关示例和定义，请参阅 here

【讨论】：

如果没有正确的元标记，页面将永远不会响应！ Read the documentation
但是，如果没有使用正确的类，您将永远无法在网格中获得正确的布局
我必须测试不同的选项！我可以使用可以使页面灵活的东西吗？？？我的意思是在屏幕、移动设备、ipad 等设备上看起来都不错
col-12 col-md-6 与col-md-6 完全相同
OP 不告诉。我只是假设“响应式”意味着列在他的小屏幕上折叠。

【解决方案2】：

"你能说为什么这段代码不适应不同的手机吗设备？”

元标记错误。应该是：

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

如果没有正确的元标记，页面将永远响应。 Please read the documentation...

“为确保所有设备的正确渲染和触摸缩放，添加响应视口元标记到您的<head>。”

另见：

Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile

【讨论】：

问题是使用的列类对于移动设备是错误的，它们都是针对平板电脑大小的屏幕
@mast3rd3mon - 如果没有正确的元标记，页面将永远响应！ Read the documentation

【解决方案3】：

要使设计能够响应移动设备，请使用引导类，如 col-xs-3、col-xs-6。 “col-xs-*”用于定位宽度大于 230 且小于 768 的移动设备。还可以使用 @media screen {} 将特定样式定位到特定宽度的移动设备。

【讨论】：

xs 在 bootstrap 4 中已弃用