引导程序：我的引导程序代码有什么问题答案

【问题标题】：Bootstrap: what is wrong in my bootstrap code引导程序：我的引导程序代码有什么问题
【发布时间】：2018-02-19 04:43:13
【问题描述】：

这段代码有什么问题，它应该在我的平板电脑上响应，但它不是，我已经为两个 div 使用了 12 列，所以第三个应该在它们下方的新行中，但是当我检查时我的平板电脑上的 index.html 我发现它们都在一行中，这段代码有什么问题。

  <link rel = "stylesheet" href="css/bootstrap.min.css">
  <link rel = "stylesheet" href = "demo.css">  
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6 ">Bootstrap Tutorial</div>
        <div class="col-xs-6  ">Bootstrap Tutorial</div>
         <div class="col-xs-4  ">Bootstrap Tutorial</div>
        <button class="btn btn-primary">click</button>
     </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>

【问题讨论】：

投票结束，因为这个问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。
您的 HTML 无效。检查 sn-p 编辑器并问自己为什么 HTML 源代码视图中的红色文本会出现。 <div class="container"></div> 应该是 <div class="container">
对不起，我编辑了它，这是第一次在这里发布问题
您能确认您使用的是 V3 或 V4 的 bootstrap 吗？
@SanchitPatiyal 为什么要编辑问题并包括引导程序的 V4 ？为什么你认为它是 V4 而不是 V4 ？您完全改变了问题并使其无关紧要

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

col-xs-* 类在 Bootstrap 4 中不存在（不再存在）。

用相应的col-* 类替换所有这些。

参考：

https://getbootstrap.com/docs/4.0/migration/#grid-system

同样重要：

您的问题和代码表明您误解了预期的行为。

所以，我建议你在这里研究这个页面上的文档：

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

以下代码 sn-p 可能会让您更好地了解它的工作原理：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.row>[class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
   
<div class="container">
    <h2>Medium ('md') breakpoint:</h2>
    <div class="row">
        <div class="col-md-6">Bootstrap Tutorial 1</div>
        <div class="col-md-6">Bootstrap Tutorial 2</div>
        <div class="col-md-6">Bootstrap Tutorial 3</div>
    </div>
</div>

<div class="container mt-3">
   <h2>Large ('lg') breakpoint:</h2>
    <div class="row">
        <div class="col-lg-6">Bootstrap Tutorial 1</div>
        <div class="col-lg-6">Bootstrap Tutorial 2</div>
        <div class="col-lg-6">Bootstrap Tutorial 3</div>
    </div>
</div>

【讨论】：

虽然这是个好建议，但它无法解决无效的 HTML 方面。
@connexo 这不是问题的主要原因，因为现代浏览器已经非常擅长处理无效的 HTML。主要原因有两个，我的回答中对此进行了描述。
仍然 .row 不会在 .container 内，这显然是 OP 的意图。
@connexo .row 是在我从 OP 的帖子复制到我的代码编辑器的代码中的 .container 中。
所以 col-xs-* 已从 bootstrap 4 中删除，现在我可以只使用 col - * 真的很感谢我从几个小时以来一直在尝试

【解决方案2】：

试图跟上您对原始帖子的修改。无论如何，我将您所有的<script> 和<link> 标签移动到<head>。我把你的col-xs-* 改成了col-*。

编辑：感谢 Temani Afif，我更新了我的帖子。另外，我认为他使用的是 BS4 而不是 BS3，因为我正在查看该帖子的早期版本。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col col-6">Bootstrap Tutorial</div>
      <div class="col col-6">Bootstrap Tutorial</div>
      <div class="col col-4">Bootstrap Tutorial</div>
    </div>
  </div>
</body>

【讨论】：

我们不需要单独一行中的第三列......你可以在一行中超过 12 个......所以你说的是错误的
好的，谢谢，但是为什么我们需要创建一个新行，它们都是 12 列，所以任何额外的列都会在下面，我错过了什么吗？？？
感谢您更新它，是的，我也更新了它，但它会在彼此下方的 3 个不同行中生成 3 个 div？？
@SaherElgendy 那么当您运行代码 sn-p 时会看到什么？它按我的预期工作。
它在 pc 浏览器中的工作方式与您的相同，但在平板电脑中不适用，sm 用于平板电脑，我希望它可以作为两个 div 排成一行，一个在它们下方，但在我的平板电脑中它们在彼此下方