时间戳

首页 > 解决方案 > col-sm-12 在智能手机上没有 100% 的宽度 - 我做错了什么？

html - col-sm-12 在智能手机上没有 100% 的宽度 - 我做错了什么？

问题描述

断点定义 SASS：

/* For the grid */
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1660px
);

我的专栏是这样的：

<div id="footer_lower_menus" class="row">
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
</div>

预期结果：列应该是 lg 尺寸的三分之一（和 xl 一样大），md 尺寸的一半和 sm 尺寸的全宽（或者像 xs 一样更小）。

实际结果：对于大尺寸它可以工作，但对于小于 sm 的尺寸（xs，它似乎没有被编译，因为它是零），列又变成了一半或三分之一（不采用任何定义？）。

注意：内容包含文本并且似乎具有 100% 的“最大宽度”。

我在这里做错了什么？如何应用“sm 或更小”而不是“仅 sm”？

标签： htmlcsstwitter-bootstrapsassbootstrap-4

解决方案

从类列表中删除col并运行您的代码并再次检查它会为您提供全角内容。

删除col该类的原因是它将您的行分成相等的部分。这意味着如果您<div class="col">text</div>在单行中使用 5 次，那么它将平均分配您的行空间 - 这意味着每个行空间col的宽度为 20%。

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div class="container-fluid">
    <div id="footer_lower_menus" class="row">
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 1
      </div>
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 2
      </div>
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 3
      </div>
    </div>
  </div>
</body>
</html>

推荐阅读