为什么在我添加引导cdn之后按钮的位置会改变呢？
为什么在我添加引导cdn之后按钮的位置会改变呢？
提问于 2021-12-28 16:34:06
我试图制作一个多图片上传与预览，但我被困在奇怪的问题。
问题是，在我添加引导CDN之后，关闭按钮图标的位置就会改变.
我试着检查它们是否是任何重复的类，但是我什么也没有发现。
请尝试删除码页上的引导cdn，看看我在说什么。
.image-wraper{
min-height: 200px;
}
.gallery{
background-color: #fbfbfb;
border-radius: 5px;
border-style: solid;
border: 1px solid #bbbbbb;
height: 85px;
line-height: 1;
box-sizing: border-box;
height: auto;
margin: 50px;
}
.images-upload {
background-color: #ffffff;
border-radius: 5px;
border: 1px dashed #ccc;
display: inline-block;
cursor: pointer;
width: 165px;
height: 88px;
}
.image-container{
display: inline-table;
height: 88px;
width: 140px;
}
.images-preview {
border-radius: 5px;
border: 1px solid #ccc;
display: inline-block;
width: 140px;
height: 90px;
padding-top: -14px;
}
.button-container{
display: inline-flex;
height: 90px;
width: 140px;
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
}
.close-btn{
background: none;
color: white;
border: none;
padding: 0px;
margin:0px;
font: inherit;
cursor: pointer;
outline: inherit;
position: relative;
left: -146px;
top: -47px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 0px;
}
.times-icon{
font-size: 3rem;
padding: 0px;
margin:0px;
}
.custum-icon{
color: #00afca;
font-size: 3rem;
margin-top: 12px;
}
.custum-icon:hover{
color: #29818f;
}
.close-btn:hover{
color: red;
box-shadow: red 0px 7px 29px 0px;
}
/* ----------Bootstrap classes---------- */
.w-100 {
width: 100% !important;
}
.border-danger {
border-color: #dc3545 !important;
}
.pad-3 {
padding: 1rem !important;
display: flex;
flex-wrap: wrap;
}
.text-center {
text-align: center !important;
}
.m-top-1 {
margin-top: 0.25rem !important;
}
.image-margin {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" class="href">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- https://animate.style cdn -->
<title>DROP</title>
</head>
<body>
<!--CONATAINER DIV-->
<div class="">
<!--GALLERY AREA TEST WITH 1 IMAGE-->
<div class="gallery" style="margin-left: 100px; margin-right: 100px;">
<div class="pad-3">
<!--UPLOAD BUTTON-->
<div class="button-container image-margin">
<label for="images-upload" class="images-upload text-center">
<svg
class="custum-icon"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24">
<g fill="none">
<path
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1zm1 15a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2h-3v3z"
fill="currentColor"/>
</g>
</svg>
</label>
<input @change="fileChange" id="images-upload" type="file" name="images" multiple hidden>
</div>
<!--IMAGES PREVIEW-->
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</html>
回答 1
Stack Overflow用户
发布于 2021-12-28 17:15:12
我看到的Bootstrap上唯一存在的类是：
svg {
overflow: hidden;
vertical-align: middle;
}vertical-align: middle;正在使svg在images-preview之外运行。您只需将其更改为vertical-align: top !important;，就可以简单地修复它，使用!important;来确保它比引导带具有优先权。
见此处
.image-wraper{
min-height: 200px;
}
.gallery{
background-color: #fbfbfb;
border-radius: 5px;
border-style: solid;
border: 1px solid #bbbbbb;
height: 85px;
line-height: 1;
box-sizing: border-box;
height: auto;
margin: 50px;
}
.images-upload {
background-color: #ffffff;
border-radius: 5px;
border: 1px dashed #ccc;
display: inline-block;
cursor: pointer;
width: 165px;
height: 88px;
}
.image-container{
display: inline-table;
height: 88px;
width: 140px;
}
.images-preview {
border-radius: 5px;
border: 1px solid #ccc;
display: inline-block;
width: 140px;
height: 90px;
padding-top: -14px;
}
.button-container{
display: inline-flex;
height: 90px;
width: 140px;
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
}
.close-btn{
background: none;
color: white;
border: none;
padding: 0px;
margin:0px;
font: inherit;
cursor: pointer;
outline: inherit;
position: relative;
left: -146px;
top: -47px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 0px;
}
.times-icon{
font-size: 3rem;
padding: 0px;
margin:0px;
}
.custum-icon{
color: #00afca;
font-size: 3rem;
margin-top: 12px;
}
.custum-icon:hover{
color: #29818f;
}
.close-btn:hover{
color: red;
box-shadow: red 0px 7px 29px 0px;
}
/* ----------Bootstrap classes---------- */
.w-100 {
width: 100% !important;
}
.border-danger {
border-color: #dc3545 !important;
}
.pad-3 {
padding: 1rem !important;
display: flex;
flex-wrap: wrap;
}
.text-center {
text-align: center !important;
}
.m-top-1 {
margin-top: 0.25rem !important;
}
.image-margin {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}
svg {
overflow: hidden;
vertical-align: top !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" class="href">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- https://animate.style cdn -->
<title>DROP</title>
</head>
<body>
<!--CONATAINER DIV-->
<div class="">
<!--GALLERY AREA TEST WITH 1 IMAGE-->
<div class="gallery" style="margin-left: 100px; margin-right: 100px;">
<div class="pad-3">
<!--UPLOAD BUTTON-->
<div class="button-container image-margin">
<label for="images-upload" class="images-upload text-center">
<svg
class="custum-icon"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24">
<g fill="none">
<path
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1zm1 15a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2h-3v3z"
fill="currentColor"/>
</g>
</svg>
</label>
<input @change="fileChange" id="images-upload" type="file" name="images" multiple hidden>
</div>
<!--IMAGES PREVIEW-->
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</html>
然而，这并没有给出与以前完全相同的间距。因此，您可以通过向margin-top添加一些times-icon来修复它。
见此处
.image-wraper{
min-height: 200px;
}
.gallery{
background-color: #fbfbfb;
border-radius: 5px;
border-style: solid;
border: 1px solid #bbbbbb;
height: 85px;
line-height: 1;
box-sizing: border-box;
height: auto;
margin: 50px;
}
.images-upload {
background-color: #ffffff;
border-radius: 5px;
border: 1px dashed #ccc;
display: inline-block;
cursor: pointer;
width: 165px;
height: 88px;
}
.image-container{
display: inline-table;
height: 88px;
width: 140px;
}
.images-preview {
border-radius: 5px;
border: 1px solid #ccc;
display: inline-block;
width: 140px;
height: 90px;
padding-top: -14px;
}
.button-container{
display: inline-flex;
height: 90px;
width: 140px;
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
}
.close-btn{
background: none;
color: white;
border: none;
padding: 0px;
margin:0px;
font: inherit;
cursor: pointer;
outline: inherit;
position: relative;
left: -146px;
top: -47px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 0px;
}
.times-icon{
font-size: 3rem;
padding: 0px;
}
.custum-icon{
color: #00afca;
font-size: 3rem;
margin-top: 12px;
}
.custum-icon:hover{
color: #29818f;
}
.close-btn:hover{
color: red;
box-shadow: red 0px 7px 29px 0px;
}
/* ----------Bootstrap classes---------- */
.w-100 {
width: 100% !important;
}
.border-danger {
border-color: #dc3545 !important;
}
.pad-3 {
padding: 1rem !important;
display: flex;
flex-wrap: wrap;
}
.text-center {
text-align: center !important;
}
.m-top-1 {
margin-top: 0.25rem !important;
}
.image-margin {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" class="href">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- https://animate.style cdn -->
<title>DROP</title>
</head>
<body>
<!--CONATAINER DIV-->
<div class="">
<!--GALLERY AREA TEST WITH 1 IMAGE-->
<div class="gallery" style="margin-left: 100px; margin-right: 100px;">
<div class="pad-3">
<!--UPLOAD BUTTON-->
<div class="button-container image-margin">
<label for="images-upload" class="images-upload text-center">
<svg
class="custum-icon"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24">
<g fill="none">
<path
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1zm1 15a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2h-3v3z"
fill="currentColor"/>
</g>
</svg>
</label>
<input @change="fileChange" id="images-upload" type="file" name="images" multiple hidden>
</div>
<!--IMAGES PREVIEW-->
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon mt-5'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon mt-5'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon mt-5'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon mt-5'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
<div class="image-container image-margin">
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
<button class="close-btn ">
<svg
class='times-icon mt-5'
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
>
<g fill="none">
<path
d="M7.172 14.243a1 1 0 1 1-1.415-1.415l7.071-7.07a1 1 0 0 1 1.415 1.414l-7.071 7.07z"
fill="currentColor"
/>
<path
d="M5.757 7.172a1 1 0 1 1 1.415-1.415l7.07 7.071a1 1 0 0 1-1.414 1.415l-7.07-7.071z"
fill="currentColor"
/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</html>
编辑：为3rem的3rem添加了引导类mt-5到times-icon。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70509869
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号