如何在Bootstrap中指定方形网格图片系统的长度和宽度

方形网格图片的长度和宽度可以通过传统的CSS方法来指定，它可以通过样式标签或使用链接标签轻松地纳入我们的HTML代码中。当谈到Bootstrap时，它提供了一个更简单有效的方法来完成同样的任务，而且事半功倍。要在Bootstrap中指定方形网格图片的长度和宽度，你需要了解Bootstrap网格系统的基本概念。

在Bootstrap中，有五个类可以改变长度和宽度，有了这个基本概念，你可以很容易地增加或减少任何在网格列中的图片的长度。

.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-

例子1：这里你会看到三张网格宽度相同的图片，但是如果屏幕比较小，那么第三张网格会改变行，变得比其他两张宽。
示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Grid System</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
  
    <style>
        .col {
            text-align: center;
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710120839/download14.png" />
            </div>
            <div class="col">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121155/03.png">
            </div>
            <div class="col">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121314/images2.png">
            </div>
        </div>
    </div>
</body>
  
</html>

输出:
如何在Bootstrap中指定方形网格图片系统的长度和宽度？

例子2：这里你会看到三个不同宽度的包含图片的网格。
示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Grid System</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
          "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
       "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .col {
            text-align: center;
            border: 5px solid black;
        }
          
        div {
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <br>
        <center>
            <div class="row">
                <div class="col-sm-3">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710120839/download14.png" />
                </div>
                <div class="col-sm-6">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710123529/GeeksforGeeksLogoHeader1.png">
                </div>
                <div class="col-sm-3">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121314/images2.png">
                </div>
            </div>
        </center>
    </div>
</body>
  
</html>

输出:
如何在Bootstrap中指定方形网格图片系统的长度和宽度？