Bulma 柱不起作用，如何修复？

Question

我正在尝试建立一个 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>

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

我希望这三列是三个实际的列，它们之间有一些高度和一些 space。然而，他们是 "stacked".

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

Answer 1

您没有在代码中包含 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>

Bulma 柱不起作用，如何修复？

Bulma columns are not working, how to fix them?

html

css

responsive-design

bulma