Question

这段代码有什么问题，应该是对我的平板电脑做出响应，但事实并非如此，我已经使用12列两个div，所以第三列应该在新行下面，但是当我检查时我的平板电脑上的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>

Answer 1

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

将所有那些替换为相应的col-*类。

参考：

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

同样重要的是：

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

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

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

以下代码段可能会让您更好地了解其工作原理：

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

Answer 2

尝试跟上原始帖子的编辑内容。无论如何，我将所有<script>和<link>标记移到<head>。我将您的col-xs-*更改为col-*。

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

＆＃13;

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

＆＃13;

Bootstrap：我的引导代码

2 个答案:

同样重要的是：