我从站点复制了一个基本示例并包含css文件,但列没有样式。 我错过了什么?
https://jsfiddle.net/bLm2rgoz/6/
下面是模板:
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>
当然,我包括 https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css
这只会解决 5 列的响应能力!您可以通过widening
和shrinking
提琴手视图来演示响应能力。(提示:拖动视图面板的左侧以执行此操作)
预期和观察:视图较宽时的1 2 3 4 5
行,列
1
2
3
4
5
当视野不宽时。
如果您正在尝试设置列的样式,请更具体地说明您想要的样式:)
它不起作用,因为他们甚至没有使用他们告诉你用来获得该结果的相同 CSS 库(是的,这很糟糕!
如果您查看示例站点上的源代码,您会发现它实际上是:<p class="bd-notification is-primary">First column</p>
而不仅仅是First column
.
所以我们编辑我们的 HTML,它仍然不起作用。所以回到源头,我们发现被引用的 CSS 在bulma-docs.min.css
中,而不是在 CDN 或您被告知使用的下载中的 CSS(这只是bulma.min.css
或bulma.css
)。
所以我们看看它,并在我们的HTML<head>
中添加一些新的CSS......
<style>
p.nice {
background-color: #00d1b2;
color: white;
border-radius: .375em;
font-weight: 600;
padding: 1.25rem 0 1.25rem 0;
position: relative;
text-align: center;
}
</style>
并将示例更改为这样...
div class="columns">
<div class="column"><p class="nice">First column</p></div>
<div class="column"><p class="nice">Second column</p></div>
<div class="column"><p class="nice">Third column</p></div>
<div class="column"><p class="nice">Fourth column</p></div>
</div>
然后它最终看起来像网站上的例子。
亲爱的库/框架开发人员...我们爱你和你所做的工作,尤其是当你记录它并做出很好的例子时。但是,当您声称使用框架"非常简单"并且"只需复制此代码"时,则结果应该与您的示例相同。不要使用与示例中输入的代码不同的代码,除非您还非常清楚地声明它的外观/行为会有所不同以及原因。请记住,即使是经验丰富的程序员也是框架的"新手",不得不浪费时间试图弄清楚为什么它不像示例那样工作真的很令人愤怒。