我正在尝试不同的方法来调整移动(不同(屏幕大小的余量。我正在使用左边的空白根据中等屏幕大小设置空白。并且想要调整小屏幕尺寸。通常哪种方法是有用的和丘疹性的。对我来说什么都不起作用。怎么了？
有人能举例说明吗。我可以调整列格的屏幕大小。但标题、页眉和页脚才是问题所在。如果我给出标题并使用左边距使其水平对齐。如何针对不同尺寸的屏幕进行更改？怎么了？
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>
您可以尝试Bootstrap类根据屏幕大小进行调整。首先设置默认值(移动(，然后使用md或lg:进行更改
<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，而对于大屏幕，margin left被设置为5
我给您举了一个标题H1元素的例子。
首先确保将引导css链接正确添加到您的页面。
在引导程序中，可以使用m类作为边距，使用p类作为填充。此外，您还可以选择设置要应用边距或填充的一侧。例如，使用ml设置左边距。您可以给它一个介于0和5之间的值。例如，ml-3。您也可以为多个屏幕大小指定多个值，如下例所示：
<h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>
在本例中，heading元素的边距为5，当屏幕大小达到中等时，它将变为3，当屏幕尺寸达到大时，它会变为0。
您所要做的就是在媒体屏幕中给出类名。你还没有给出你的类名，只给了左边的空白
@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>