文章/答案/技术大牛

发布

社区首页 >问答首页 >当我有CSS的时候，为什么Bootstrap不能工作？

问当我有CSS的时候，为什么Bootstrap不能工作？
EN

Stack Overflow用户

提问于 2022-03-15 17:19:49

回答 1查看 80关注 0票数 -2

嘿，我是网络设计的新手，我正在为学校班级做我的项目。当我打开CSS时，我的引导程序似乎不起作用，但是当我注释掉我的css引导程序时，它似乎起作用了。我试着用"blokkviz“类的div。以下是我的HTML：

<!DOCTYPE html>
<html lang="en">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css?v=1.0" rel="stylesheet" type="text/css" />
</head>

<body class="telo" id="body1">
    <div class="container-fluid" id="prvi">
        <img src="kviz.jpg" id="logo">
        Sajt namenjen za kviz
    </div>

    <div class="grupa">
        <h1 class="naslovGrupe">C#</h1>
        <div class="blokkviz" class="col-md-6"class="col-lg-6">
            <h2 style="font-weight: bold">Pocetnicki kviz</h2>
            <h6 style="margin-left: 10px; margin-top: 15px;">Kviz namenjen pocetnicima ili osobama koje zele da obnove pocetno znanje C#</h6>
            <div style="margin-left:13px; margin-top:80px"> Trajanje 5-10 min</div>
            <button id="prvikviz" class="zapocni">Zapocni</button>
        </div>

        <div class="blokkviz" class="col-md-6"class="col-lg-6">
            <h2 style="font-weight: bold">Pocetnicki kviz</h2>
            <h6 style="margin-left: 10px; margin-top: 15px;">Kviz namenjen pocetnicima ili osobama koje zele da obnove pocetno znanje C#</h6>
            <div style="margin-left:13px; margin-top:80px"> Trajanje 5-10 min</div>
            <button id="prvikviz" class="zapocni">Zapocni</button>
        </div>
        
    </div>




    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>

</html>

下面是css：

#prvi{
    background-color: rgb(250, 221, 26);
    height: 90px;
    text-align: center;
    font-weight: bolder;
    font-size: 30px;
    padding-top: 15px;
    color:white;
    text-shadow: 2px 2px #000000;
}

.telo{
    background-color: lightblue;
}

#logo{ 
    position:absolute; 
    top:0; 
    left:0; 
    height:80px 
}

.blokkviz{
    float:left;
    width: 300px;
    height: 300px;
    display: block;
    border: 2px solid black;
    padding: 5px 10px;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 100px;
    background-color: rgb(226, 224, 224);
}

h2{
    text-align: center;
}

h1{
    margin: 15px;
    margin-top: 60px;
}

.grupa{
    height: 500px;
    border: 3px solid black;
}

#prvikviz{
    position:absolute;
    left: 250px;
    top: 460px;   
}
.zapocni{
    background-color: rgb(24, 141, 219);
    color:white;
    font-weight: bold;
}

.pitanja{
    margin-left: 300px;
    line-height: 27px;
    margin-top: 50px;
    margin-right: 150px;
}

.povratakNaPocetak{
    position: relative;
    left: 5px;
    top: 5px;
    border: 2px solid gray;
}
input[type="radio"]{
    margin: 10px;
}
.predaj{
    margin-bottom: 110px;
    margin-top: 30px;
    margin-left: 12px;
    font-size: 20px;
    font-weight: bold;
    background-color: rgb(24, 141, 219);
    color:white;
    border: 3px solid rgb(24, 141, 219);
}

.naslovGrupe{
    margin: 15px;
}

注意:可能有些东西在其他地方不被使用。这是因为我的JavaScript文件和另一个html文件，但问题似乎在css中，所以我只添加了这2。

bootstrap-4

html

css

回答 1

Stack Overflow用户

发布于 2022-03-16 08:29:16

我认为由于您构造class的方式，它不起作用

class="blokkviz" class="col-md-6" class="col-lg-6"

如果你像下面这样组织的话，它会更好地工作，你只需要一个class，里面列出了所有的变量。

class="col-md-6 col-lg-6 blokkviz"

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71486414

复制

相似问题

问当我有CSS的时候，为什么Bootstrap不能工作？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我有CSS的时候，为什么Bootstrap不能工作？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我有CSS的时候，为什么Bootstrap不能工作？
EN