如何使用 Bootstrap 调整小屏幕的边距？答案

【问题标题】：How to adjust margin for small screens in Bootstrap 4?如何使用 Bootstrap 调整小屏幕的边距？
【发布时间】：2021-01-10 00:00:18
【问题描述】：

我正在尝试不同的方法来调整移动（不同）屏幕尺寸的边距。我正在使用 margin-left 根据中等屏幕尺寸设置边距。并且想针对小屏幕尺寸进行调整。通常哪种方法有用且流行。我的情况没有任何效果。出了什么问题？

谁能举例说明一下。我可以调整列网格的屏幕大小。但是标题和页眉和页脚是问题所在。如果我给出标题并使用左边距使其水平对齐。如何更改它以适应不同尺寸的屏幕？怎么了？

1)Do I need to add different style tags for each of them(mobile and medium size using media query. It is not working.) 


2)I trying to add class visible-xs and add mobile-margin (h1 view on mobile)

3)Add bootstrap utility class (h1 Utility class) 



<script>
<!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awsome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<!-- font awsome -->
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    
</script>

<style>
  .read{
        width:300px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 50px;
        padding-top: 8px;
       margin-left: 400px;
        margin-top: 100px;
    }
    
.learn{
        width:300px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 50px;
        padding-top: 8px;
      /* margin-left: 400px;*/
      /*  margin-top: 300px;*/
    }
    .mobile{
        width:400px;
        height:70px;
        border-radius: 40px;
        background-color: darkgoldenrod;
        padding-left: 100px;
    } 
.mobile-margin{
        margin-left: 50px;;
    }    

@media only screen and (min-width : 320px) {
margin-left: 50px;
}

@media only screen and (min-width : 768px) {
margin-left: 400px;
}
</style>




<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="read">Read more</h1>
        </div>
    </div>
    </div>  
    
    
    <div class="container">
    <div class="row">
        <div class="col-md-12 ml-md-4 ml-sm-1">
            <h1 class="learn">Utility Class</h1>
        </div>
    </div>
    </div>  
    
    
   <div class="container">
    <div class="row">
        <div class="mobile-margin visible-xs">
            <h1 class="mobile">view on mobile</h1>
        </div>
    </div>
    </div>  
</body>

【问题讨论】：

标签： html css

【解决方案1】：

你所要做的就是在媒体屏幕上给出类名。你没有给出你的类名，只是给出了 margin-left

@media only screen and (min-width : 768px) {
margin-left: 400px;
}

你可以这样指定名字

 @media only screen and (min-width: 320px) {
        .read {
          margin-left: 50px;
        }
      }

      @media only screen and (min-width: 768px) {
        .read {
          margin-left: 400px;
        }
      }

您可以将标题居中

<h4 class="text-center">
<h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4>
<h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4>
<h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4>

按钮居中

<div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>

【讨论】：

我正在尝试做的是，在中心设置标题/按钮。但看起来 ml-4 或 ml-5 不起作用。使用媒体查询我能够实现它。但是使用引导类，not working.ml - 4 不足以将标题移动到中心。（对于所有屏幕类型，标题应该在中心）我应该创建多少列和什么大小的 div？我创建了因为我想要全屏大小和标题在中心。想让 div 响应。
查看答案。在引导程序中，您可以使用 text-lg-center 在大屏幕的中心显示标题。使用 col text-center 使按钮居中

【解决方案2】：

您可以尝试引导类以根据屏幕尺寸进行调整。首先设置一个默认（移动），然后使用mdlg进行更改

<div class="row">
    <div class="col-md-3 ml-0 ml-lg-5"> Margin Test </div>
    <div class="col-md-3 ml-0 ml-lg-3"> Margin Test </div>
</div>

margin left 设置为0 用于移动设备左侧边距设置为 5 用于 lg

【讨论】：

【解决方案3】：

我给你一个标题 H1 元素的例子。

首先确保将引导 css 链接正确添加到您的页面。

在引导程序中，您可以使用m 类作为边距，使用p 类作为填充。此外，您可以选择设置要应用边距或填充的一侧。例如，使用ml 设置左边距。您可以给它一个介于 0 和 5 之间的值。例如，ml-3。您还可以为多个屏幕尺寸指定多个值，如下例所示：

<h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>

在本例中，标题元素的边距为 5，当屏幕尺寸达到中等时，它会变为 3，当屏幕尺寸达到大时，它会变为 0。

【讨论】：