bootstrap教程与我的工作不匹配，这是什么问题

问题描述 投票：-1回答：1

我正在从教程中学习引导程序，我在导师编写的代码与他得到的结果之间一直存在不匹配的问题我将发布3张图片，希望读者能从中识别出问题。[`

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <style >
      .boxy{
        background: #b3ddf;
        border: 2px solid black;
      }
    </style>
    <div class="container">
      <div class="row">
        <div class="col-g-4 boxy">COL Larg 4</div>
          <div class="col-g-4 boxy">COL Larg 4</div>
            <div class="col-g-4 boxy">COL Larg 4</div>
                  <div class="col-g-4 boxy">COL Larg 4</div>

      </div>

    </div>

  </body>
</html>

`]1它来自于引导程序的非常基本的网格教程，请参阅导师结果与我的导师之间的区别，请帮助我。谢谢。ps：辅导员使用bootstrap 3，而我使用4，如果问题在bootsrtap版本中，我该如何解决该问题。

html bootstrap-4 atom-editor
1个回答
0
投票

以下代码片段采用注释中指定的建议ive来实现您的导师布局

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <style>
    .boxy {
      background: #b3ddf;
      border: 2px solid black;
    }
  </style>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 boxy">COL Larg 4</div>
      <div class="col-sm-4 boxy">COL Larg 4</div>
      <div class="col-sm-4 boxy">COL Larg 4</div>
    </div>
    <div class="row">
      <div class="col-sm-6 boxy">COL Larg 6</div>
      <div class="col-sm-6 boxy">COL Larg 6</div>
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.