插入bootstrap.css而不影响或更改我的css

6ovsh4lw  于 2022-11-26  发布在  Bootstrap
关注(0)|答案(3)|浏览(281)

我已经创建了一个图像上传程序通过使用它自己的引导,但是当我在我的页面中使用它的bootstrap.css时,<hr/>标记和其他标记css受到影响,不能按照我的设计给予正确的输出。这是**My Form,我需要在其中应用这个Image Uploader。但是当我将这个Image Uploader脚本和它的css插入或复制到My Form in Image节时。它扰乱了我的整个css,只使用引导css和提交的形式,甚至onclick上清除按钮.我混合后,我的表单和图像上传我得到这个输出,这是下面给出的代码,片段,这是JSFIDDLE**。我请检查我的形式和形式后,我添加图像上传程序,它扰乱了我的css文件,甚至不显示我预览的图像。我不知道我哪里做错了。
第一个

ffscu2ro

ffscu2ro1#

正如sanjeev所提到的,首先要在自定义CSS文件之前链接bootstrap.css文件。如果Bootstrap的一些样式影响了你的样式,那么给予你的元素类,并更具体地设置它们的样式。
我注意到你的CSS是以td这样的普通元素为目标的,所以给予tdtr的类,并在你的CSS中以td.classname {properties}这样的元素为目标。
或者,为父元素table/div指定一个类,并将元素指定为父元素的子元素,即table.classname tr {properties}

bxgwgixi

bxgwgixi2#

您可以按如下方式 checkout 文件:

  • css属性按顺序呈现,则可以按如下方式呈现文件:
<link rel="stylesheet" href="common/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="common/css/own.css" />
  • 您可以使用**"!important”**确保实现了css属性,如下所示:
.important-css {
          color: red !important;
    }
eh57zj3b

eh57zj3b3#

在导入引导程序css之后导入您自己的自定义css文件:

import 'bootstrap/dist/css/bootstrap.min.css';
import './style.css';

相关问题