Mobile Resolution

所以我正在使用Bootstrap,并设法将其居中,但当我更改了我的决心/使其更小时,按钮被包裹并向右移动了一点,有人能告诉我它做错了什么吗?

--HTML--
<div class="d-grid gap-2 col-2 mx-auto text-center">
       <button id="Get" class="btn btn-outline-success btn-lg" type="button">Newest Upload</button> </div>

--CSS--
#Get {
    border-width: 4px;
    font-family: Lexend;
}

我试着把它放在中间,它在更高的分辨率下工作,但当它在移动分辨率上时,它移到了左边

推荐答案

#Get {
    border-width: 4px;
    font-family: Lexend;
    margin: 0 auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="d-grid gap-2 mx-auto text-center">
       <button id="Get" class="btn btn-outline-success btn-lg" type="button">Newest Upload</button> </div>

若要解决此问题,可以使用MX-AUTO类将按钮水平居中,而不考虑列的宽度.以下是更新后的HTML代码:

Html相关问答推荐

Flexbox嵌套div溢出

如何找到FontAwese图标的Unicode值?

创建一个带有div和径向渐变的全宽半圆

<nav和button是姐妹元素.当添加了导航活动类时,我如何为按钮编写CSS?

当文本添加到元素中时,将元素拉到页面上

减小HTML负载中base64字符串的大小

如何使元素具有粘性

如何居中此按钮,即使它已经在计算机分辨率中居中

样式化单选按钮 背景 colored颜色

SVG 填充 colored颜色 不使用轮廓填充空白区域

如何使用 CSS 应用带有笔划的文本阴影?

如何让一个 div 元素粘在另一个元素上?

从垫分页器中删除输入边框

为四开本网站主页添加背景图片

如何让 backdrop-filter: blur() 效果在 iOS 上运行?

如果不透明的元素出现在下方,为什么不透明度会使一个元素出现在另一个元素上方?

在中心而不是边界处填充 svg 的背景

html tailwindcss 给 li 标签添加边框

Bootstrap 5 网格问题,div 向下转义