Bootstrap中的间距与实例

Bootstrap有许多类的设施，可以轻松地在HTML中对元素进行造型。它包括各种响应式的填充和边距类，用于修改元素的外观。间距工具没有应用于断点的断点符号。
以下语法用于在各种类别中添加间距。

(属性)(边)-(大小)为xs
(property)(sides)-(breakpoint)-(size)为sm, md, lg和xl。

属性：有两种为元素添加间距的方法。

m : 这个属性定义了保证金。边距提供了一个边缘或边界。
p :这个属性定义了padding。填充属性用于在内容周围产生空间。

侧面：这允许用户在任何需要的地方将内容的间距添加到特定的侧面。

t : margin-top/padding-top。
b : margin-bottom/padding-bottom。
l : margin-left/padding-left。
r : margin-right/padding-right。
x : 用于padding-left和padding-right/margin-left和 margin-right。
y : 用于padding-top和padding-bottom/margin-top和 margin-bottom。
blank : 元素四边的空白/填充。

大小：这允许用户在关卡中添加特定数量的间隔。

0 – 0px margin/padding.
1 – 4px margin/padding。
2 – 8px margin/padding。
3 – 16px margin/padding。
4 – 24px margin/padding。
5 – 48px margin/padding。
auto —- auto margin。

断点：断点是网站内容可以根据设备进行调整的点，并允许向用户展示最佳布局。

sm、md、lg和xl是以下断点。

语法:

对于断点 – xs:

<div class="mt-4">

对于断点 – md。

<div class="mt-md-4">

对于断点 – lg:

<div class="mt-lg-4">

对于断点 – xl:

<div class="mt-xl-4">

响应式间隔表：

屏幕尺寸	类别
出现在所有	.ml-3
只出现在 xs	.ml-3 .ml-sm-0 上。
只出现在sm	.ml-sm-3 .ml-md-0上。
只出现在md上	.ml-md-3 .ml-lg-0
只出现在lg上	.ml-lg-3 .d-xl-0
只出现在xl	.ml-xl-3上

示例 1:

<!DOCTYPE html>
<html>
    <head>
     
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
         
        <!-- Link Bootstrap Js and Jquery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
        <title>
            GeeksForGeeks Bootstrap Spacing Example
        </title>
    </head>
     
    <body>
        <br>
        <tab>
        <h3>Padding And Margin</h3>
         
        <div class="container text-white">
            <br><br>
             
            <div class="pt-5 bg-success">
                GeeksForGeeks
            </div>
            <br>
             
            <div class="p-4 bg-success">
                GeeksForGeeks
            </div>
             
            <div class="m-4 pb-5 bg-success">
                GeeksForGeeks
            </div>
        </div>
    </body>
</html>

输出:

Bootstrap中的间距与实例

示例 2:

<!DOCTYPE html>
<html>
<head>
    <!-- Link bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     
    <!-- Link bootstrap JS and Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
    <title>
        GeeksforGeeks Bootstrap Spacing Example
    </title>
</head>
 
<body>
 
    <div class="container"><br>
        <h4 style="color:green;">
            GeeksforGeeks is a regularly spaced.
        </h4>
         
        <h4 class="ml-5 ml-lg-0"style="color:green;">
            GFG Geeks1 has left margin visible on
            xs, sm and md displays.
        </h4>
    </div>
     
</body>
</html>

输出:

Bootstrap中的间距与实例

示例 3:

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     
    <!-- Link Bootstrap JS and Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
    <title>
        GeeksForGeeks Bootstrap Spacing Example
    </title>
</head>
 
<body>
    <div class="container"><br>
        <div class="mx-auto" style="width:300px;
                            background-color:green;">
            <h3 style="color:white;">GeeksForGeeks</h3>
        </div>
    </div>
</body>
</html>