图片

Question

使用Bootstrap网格并将页面的大小调整为最小列大小以下时，我的列不会自动堆叠。最小大小的列甚至都无法识别，只有第二大的列大小及以上才起作用。如果无法按预期在Firefox和Atom HTML Preview中使用网格，我会以为我使用的网格不正确。

这是我的代码...

myField

图片

在Chrome中： bootstrap-failing-chrome

在Firefox中： bootstrap-working-firefox

我认为使用cdn引导程序是一个问题，但是在本地运行它也不能解决问题。

我使用多个版本的Chrome进行了测试，并删除了所有CSS，以查看是否是我在引导程序中覆盖的内容。

Answer 1

您在head标签中缺少此标签。

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

Answer 2

您的代码正确。引导程序已正确链接。您在这里面临的只是一个小小的误解。当Google Chrome浏览器的宽度缩小到576px时，Bootstrap会考虑col-xs- *的参数，并且由于您未提供参数，因此它会将其视为默认col-xs-1。

<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>

我认为这现在对您有用。

Answer 3

尝试使用此

<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。

Bootstrap 4列大小无法在Google Chrome中使用

图片

3 个答案: