gpt4 book ai didi

html - Bulma.io 中的容器大小调整

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

我已经开始学习 bool 玛了。我想在 x 轴上最小化容器(图片中的灰色区域)的大小,以便我可以将元素嵌入到文档中。在文档中找不到任何相关内容。这是我的源代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">

<div class="hero-body has-background-danger">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid ">
</div>
</nav>
</div>
</section>
</body>
</html>

这是此代码的示例 View : grey area is the one that I want to minimize

最佳答案

您可以将它包装在一个column 类中,然后调整它的大小。 (例如 is-half)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<div class="columns is-centered">
<div class="column is-half">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid">
</div>
</nav>
</div>
</div>
</div>
</section>
</body>
</html>

结果:

enter image description here

关于html - Bulma.io 中的容器大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51580680/

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