logo标签列表

Bootstrap 4列尺寸在Google Chrome中无法正常工作

javascriptcsstwitter-bootstrapgoogle-chromefirefox
6
当使用Bootstrap网格并将页面调整为小于最小列大小时，我的列不会自动堆叠。最小尺寸的列甚至都没有被识别，只有第二大的列尺寸及以上才能正常工作。如果在Firefox和Atom HTML预览中未按预期工作，我会认为我错误地使用了网格。以下是我的代码...
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>bootstrap interface</title>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-sm-4 col-md-6 col-lg-12" style="background-color: red">
          <h1>Red</h1>
        </div>
        <div class="col-sm-4 col-md-6 col-lg-6" style="background-color: white">
          <h1>White</h1>
        </div>
        <div class="col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
          <h1>Blue</h1>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

  </body>
</html>

图片

在谷歌浏览器中： bootstrap-failing-chrome

在火狐浏览器中： bootstrap-working-firefox

我认为这可能与使用cdn引入bootstrap有关，但是将其下载到本地并没有解决问题。

我在多个版本的Chrome中进行了测试，并删除了所有自己编写的css以查明是否是由于覆盖了bootstrap样式而导致的问题。

你能分享一下你遇到问题的链接吗？ - Anil K.
@AnilK。我发布了照片。 - Chris Lyons
这是我在寻找解决方案时遇到的第一个问题。 如果您特别遇到表格问题，可以查看以下问题： https://dev59.com/wmUp5IYBdhLWcg3wtZA0 - DubDub
3个回答
16
您缺少 head 标签中的内容。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1
哈哈哈，是的！我爱你！哇，我真是太傻了。等我获得访问权限后给个赞（我今天加入的）。 - Chris Lyons
也对我有用。你能解释一下吗？看起来像是魔法 :) - Cédric ZUGER
@Cédric ZUGER 元视口是指网页上用户可见的区域，它随设备而异，在手机上比在电脑屏幕上要小。这意味着浏览器将以自己屏幕的宽度来渲染页面的宽度。 - Anil K.
好的。谢谢 :) - Cédric ZUGER
2
您的代码是正确的。引导程序已正确链接。这里只是一个微小的误解。 当Google Chrome缩小到576像素宽时，Bootstrap会考虑col-xs-*的参数，因为您没有提供参数，所以它将其视为默认的col-xs-1。

source: https://getbootstrap.com/docs/4.0/layout/grid/

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>bootstrap interface</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-6 col-lg-12" style="background-color: red">
          <h1>Red</h1>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-6 col-lg-6" style="background-color: white">
          <h1>White</h1>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
          <h1>Blue</h1>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

  </body>
</html>

我认为现在这应该对你有用了。
你说得对，我意识到我的问题不在于col-sm-*，而是当调整大小时列没有自动换行！我正在更新帖子。 - Chris Lyons
那么它现在是失败了还是正常工作？点赞会有帮助的。 :) - Ajay Kudva
它仍在失败:(它没有识别 XS 列，但现在它正在识别 SM 列。当缩小比例时，我需要它们换行，但它们却在缩小。 - Chris Lyons
0

尝试使用这个

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>bootstrap interface</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-4 col-md-6 col-lg-12" style="background-color: red">
          <h1>Red</h1>
        </div>
        <div class="col-12 col-sm-4 col-md-6 col-lg-6" style="background-color: white">
          <h1>White</h1>
        </div>
        <div class="col-12 col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
          <h1>Blue</h1>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

  </body>
</html>

请注意，在Bootstrap 4中不需要使用xs。
好的，现在我有点疯了。如果我将您的代码完全复制到我的编辑器中，保存并从本地HTML文件在Chrome中运行它，它就无法正常工作。但是当我尝试“运行代码片段”按钮并点击“全屏”时，它完全可以正常工作！我将其推送到GitHub上，以查看Chrome是否在本地运行事物，不幸的是，在那里它也无法正常工作。 - Chris Lyons
所以，如果我调整 Chrome 的大小，就没有问题，但是当我检查并选择所有不同手机屏幕时，它仍然非常小，在 col-md 大小。 - Chris Lyons
你可以通过在适当的CSS类中使用不同的数字来调整特定断点处的大小，例如，当你想在md断点处拥有更大的列时，可以使用col-md-8，但请记住限制为12。 - Michał Drabik
是的，但最小列大小甚至没有被识别。我只是迷失了方向，因为在片段查看器和jsFiddle中它都可以正常工作。 - Chris Lyons
你使用的是哪个版本的Bootstrap？ - Michał Drabik
显示剩余6条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接