css 为什么在我添加bootstrap cdn后按钮的位置会改变？

4sup72z8  于 2022-12-15  发布在  Bootstrap
关注(0)|答案(1)|浏览(145)

我正试图使一个多图像上传预览，但我被困在奇怪的问题。
问题是在我添加引导CDN后，关闭按钮图标的位置发生了变化。
我试着检查他们是否有任何重复的类，但我什么也没发现。
请尝试删除codepen上的引导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;
}
.custom-icon{
    color: #00afca;
    font-size: 3rem;
    margin-top: 12px;
}
.custom-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="custom-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>
css

1条答案

按热度按时间
i2byvkas

i2byvkas1#

我能看到的唯一存在于Bootstrap上的类是：

svg {
    overflow: hidden;
    vertical-align: middle;
}

vertical-align: middle;使svg刚好超出images-preview。您只需将其更改为vertical-align: top !important;即可修复此问题。使用!important;可确保其优先于 Bootstrap 。

请参阅此处

x一个一个一个一个x一个一个二个x
然而，这并没有给予与之前[完全]相同的间距，因此，您可以通过添加一些margin-top到times-icon来修复它。

看这里

一个三个一个

**编辑：**为times-icon添加了用于3rem边距的引导类mt-5。

赞(0）分享  回复(0）举报  2022-12-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com