gpt4 book ai didi

html - Bulma 柱不起作用,如何修复?

转载 作者:太空宇宙 更新时间:2023-11-04 06:46:44 25 4
gpt4 key购买 nike

我正在尝试建立一个 Bulma 网站。

为了展示和与您分享,请考虑以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Some App</title>
<link rel="stylesheet" href="css/mystyles.css">
</head>

<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item has-text-centered">Home</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
</div>
</div>
</nav>

<section class="section">

<div class="container" style="border: 3px solid red">
<div class="columns is-centered">
<div class="column" style="border: 3px solid purple">Auto</div>
<div class="column" style="border: 3px solid yellow">Auto</div>
<div class="column is-two-thirds" style="border: 3px solid green">is-two-thirds</div>
</div>
</div>

</section>

<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

说到那些专栏,它们似乎不起作用。我想知道一路上我错过了什么。

我希望这三列是三个实际的列,它们之间有一些高度和一些空间。但是,它们是“堆叠”的。

如何让它们表现得像真正的列?

最佳答案

您没有在代码中包含 Bulma 的 CSS 文件。这就是它不应用 CSS 属性的原因。下面的代码非常适合我。我只添加了对 bulma 的 css 的 CDN 引用

<!DOCTYPE html>
<html lang="en">
<head>
<title>Some App</title>
<link rel="stylesheet" href="css/mystyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>

<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item has-text-centered">Home</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
</div>
</div>
</nav>

<section class="section">

<div class="container" style="border: 3px solid red">
<div class="columns is-centered">
<div class="column" style="border: 3px solid purple">Auto</div>
<div class="column" style="border: 3px solid yellow">Auto</div>
<div class="column is-two-thirds" style="border: 3px solid green">is-two-thirds</div>
</div>
</div>

</section>

<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

关于html - Bulma 柱不起作用,如何修复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53228481/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com